笔记：tornado中用的基于hui和bootstrap改的折叠菜单终极版（看注释）

梦里梦外; 2022-05-25 05:58 135阅读 0赞

<!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>