简单的jq实现树形菜单

最新推荐文章于 2024-10-07 10:09:39 发布

_鸭鸭

最新推荐文章于 2024-10-07 10:09:39 发布

阅读量2.1k

点赞数 1

文章标签： javaScript jq 树形菜单

本文链接：https://blog.csdn.net/qiqihong4261/article/details/81871798

版权

最近接的一个新的项目用到了树形菜单，决定跟大家分享下一个简单的树形菜单怎么实现。我也已经把它分装成jq的一个插件，里面的参数也可以根据使用自己去修改。接下来就是放代码了！

part one 样式内容

*{list-style: none;font-size: 16px;}
#wrapTree .menu-slide-sub{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../img/sub.png");
    /*background-position: 0 -320px;!*左右 上下*!*/
    line-height: 20px;
    /*vertical-align: middle;*/
}
#wrapTree  .tree-li-title{
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: default;

}
#wrapTree  .menu-slide-add{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("../img/add.png");
    /*background-position: 0 -304px;!*左右 上下*!*/
    line-height: 20px;
    /*vertical-align: middle;*/
}

part two HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="distTree.css">
</head>
<body>
<div id="wrapTree">
    <ul>
        <li class="tree-ul-li">
            <span class="tree-li-title">
                 <a class="tree-toggle menu-slide-sub" href="javascript:;" id="mianTitle"></a>
                存储内容
            </span>
            <ul>
                <li class="tree-ul-li">
                    <span class="tree-li-title">
                         <a class="tree-toggle menu-slide-sub" href="javascript:;"></a>
                        Driver 1
                    </span>
                    <ul>
                        <li class="tree-ul-li">
                            <div>
                                <input type="checkbox" class="inputBox"><label>连续测试</label>
                            </div>
                            <div>
                                <input type="checkbox" class="inputBox"><label>随机测试</label>
                            </div>
                        </li>
                        <li class="tree-ul-li">
                            <div>
                                <input type="checkbox" class="inputBox"><label>连续测试</label>
                            </div>
                            <div>
                                <input type="checkbox" class="inputBox"><label>随机测试</label>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="tree-ul-li">
                    <span class="tree-li-title">
                       <a class="tree-toggle menu-slide-sub" href="javascript:;"></a>
                        Driver 2 
                    </span>
                    <ul>
                        <li class="tree-ul-li">
                            <div>
                                <input type="checkbox" class="inputBox"><label>连续测试</label>
                            </div>
                            <div>
                                <input type="checkbox" class="inputBox"><label>随机测试</label>
                            </div>
                        </li>
                        <li class="tree-ul-li">
                            <div>
                                <input type="checkbox" class="inputBox"><label>连续测试</label>
                            </div>
                            <div>
                                <input type="checkbox" class="inputBox"><label>随机测试</label>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

part three JS

<script>
  
    (function ($) {
        $.fn.tree = function (option) {
            let opt = {
                mainTitle: "#mianTitle",
                toggleCls: "menu-slide-add",//改变的class
                bingEvent: "click",//绑定的事件
            };
            option = $.extend({}, opt, option);
            $("#wrapTree .tree-li-title").on(option.bingEvent, ".tree-toggle", function () {
                let result = $("#mianTitle").hasClass(option.toggleCls);
                if (result) {
                    $(option.mainTitle).parent().next().find("ul").hide();
                }
                $(this).toggleClass(option.toggleCls).parent().next("ul").slideToggle();
            });
            return this;
        }
    })($);
    $(function () {
        $("wrapTree").tree();
    })
</script>

在HTML部分我们的布局首先就要实现树形的布局，树形就是一种父子节点的形式，在上面我通过<ul><li><ul><li></li></ul></li></ul>的一种ul里面包裹着li，li里面包裹着ul的形式去实现。实现页面布局以后再是脚本。先引入jq的资源，jq的封装插件的形式是用$.fn在原型链上实现继承相当于js的$.prototye。我们把方法写在jquery的原型链上。树形菜单的显示隐藏就是通过点击当前的标题，显示隐藏ul里面的内容。toggle()方法就是用与显示隐藏的切换，toggleClass(）就是实现样式类命的切换。通过on()方法做事件绑定，整个插件就完成了。

可能在这里大家会有个疑问为什么要return this，那是因为要保持jquery的链式结构，为什么它可以再引用后面的方法就是因为，返回的this，再继续调用原型链上的方法。

还有为什么要增加result的判断，那是我增加的用户体验，当一级菜单收拢以后，再打开，应该是只显示二级菜单，三级菜单是收拢的。因此做了这个判断，如果一级菜单收拢，只显示二级菜单。

这就是整个树形菜单的讲解了。