<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <style> /*初始化css*/ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } body { background: #fff; color: #555; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td, th, caption { font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } a { color: #555; text-decoration: none; } a:hover { text-decoration: underline; } img { border: none; } ol, ul, li { list-style: none; } input, textarea, select, button { font: 14px Verdana, Helvetica, Arial, sans-serif; } table { border-collapse: collapse; } html { overflow-y: scroll; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } /*初始化css*/ /*左边折叠菜单里面的样式*/ .item1 { /*border: 1px solid red;*/ width: 230px; /*height: 500px;*/ height: 100%; flex: 0 0 auto; background-color: #ececec; } .Fold_demo .fold_item { position: relative; } .Fold_demo { padding-top: 24px; padding-left: 20px; padding-bottom: 24px; } .Fold_demo .fold_item h4 { margin: 0; font-weight: normal; position: relative; font-size: 13px; line-height: 22px; padding: 4px 0px; background-color: #eee; cursor: pointer; padding-right: 5px } .Fold_demo .fold_item .info { display: none; padding-left: 30px; } .Fold_demo .fold_item .info ul li span { font-family: "PingFang SC"; font-size: 10px; color: #666666; } .Fold_demo .fold_item .info ul li span:hover { cursor: pointer; font-family: "PingFang SC"; font-size: 13px; color: #3b8ede; } .glyphicon { line-height: 22px; font-size: 10px; } /*左边折叠菜单里面的样式*/ </style> <body> <div class="item item1"> <ul id="Fold_left" class="Fold_demo"> <li class="fold_item"> <h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第1天 认识一下软件<b></b></h4> <div class="info"> <ul> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}" alt=""> <span>软件是什么</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>第一段代码("hello world")</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>错误提示</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>注释</span> </li> </ul> </div> </li> <li class="fold_item"> <h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第2天 变量和赋值<b></b></h4> <div class="info"> <ul> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}" alt=""> <span>变量</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>数据类型</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>赋值测试</span> </li> </ul> </div> </li> <li class="fold_item"> <h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第3天 四则运算 <b></b></h4> <div class="info"> <ul> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}" alt=""> <span>逻辑运算(四则运算)</span> </li> <li><img src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}" alt=""> <span>计算长方形和正方形的面积</span> </li> </ul> </div> </li> </ul> </div> </body> </html> <script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script> <script> jQuery.Fold_demo = function (obj, obj_c, speed, obj_type, Event) { if (obj_type == 2) { // $(obj+":first").find("b").html("-"); $(obj + ":first").children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") $(obj_c + ":first").show() } $(obj).bind(Event, function () { if ($(this).next().is(":visible")) { if (obj_type == 2) { return false } else { $(this).next().slideUp(speed).end().removeClass("selected"); // $(this).find("b").html("+") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right") } } else { if (obj_type == 3) { $(this).next().slideDown(speed).end().addClass("selected"); // $(this).find("b").html("-") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") } else { $(obj_c).slideUp(speed); $(obj).removeClass("selected"); // $(obj).find("b").html("+"); $(obj).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right") $(this).next().slideDown(speed).end().addClass("selected"); // $(this).find("b").html("-") $(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom") } } }) } $(function () { $.Fold_demo("#Fold_left .fold_item h4", "#Fold_left .fold_item .info", "fast", 1, "click"); /*5个参数顺序不可打乱,分别是:相应区,隐藏显示的内容,速度,类型,事件*/ /*三种类型:分别对应的参数: 1 只打开一个,可以全部关闭 2 必须有一个打开 3 可打开多个 */ }); </script>
笔记:tornado中用的基于hui和bootstrap改的折叠菜单终极版(看注释)
猜你喜欢
转载自blog.csdn.net/tcf_jingfeng/article/details/80251067
今日推荐
周排行