基础版本hui和bootstrap的折叠菜单

最新推荐文章于 2024-04-13 09:45:10 发布

劲枫

最新推荐文章于 2024-04-13 09:45:10 发布

阅读量991

点赞数

分类专栏：前端文章标签：折叠菜单

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/80241648

版权

前端专栏收录该内容

60 篇文章 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">

    <style>
        .Fold_demo .fold_item {
            position: relative
        }

        .Fold_demo .fold_item h4 {
            margin: 0;
            font-weight: bold;
            position: relative;
            border-top: 1px solid #fff;
            font-size: 15px;
            line-height: 22px;
            padding: 7px 10px;
            background-color: #eee;
            cursor: pointer;
            padding-right: 30px
        }

        .Fold_demo .fold_item h4 b {
            position: absolute;
            display: block;
            cursor: pointer;
            right: 10px;
            top: 7px;
            width: 16px;
            height: 16px;
            text-align: center;
            color: #666
        }

        .Fold_demo .fold_item .info {
            display: none;
            padding: 10px
        }

        .glyphicon {
            line-height: 22px;
            font-size: 10px;
        }
    </style>
</head>
<body>


<ul id="Fold_left" class="Fold_demo">
    <li class="fold_item">
        <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4>
        <div class="info"> 很多内容</div>
        <div class="info"> 很多内容</div>
    </li>
    <li class="fold_item">
        <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4>
        <div class="info"> 很多内容</div>

    </li>
    <li class="fold_item">
        <h4> <i class="glyphicon glyphicon-triangle-right pull-left"></i> 标题<b>+</b></h4>
        <div class="info"> 很多内容</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>

劲枫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基础版本hui和bootstrap的折叠菜单

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="http://lib.baomitu.com/twitter-b
复制链接

扫一扫