[前端]AdminLTE 侧边栏三级菜单栏实现 解决点击子菜单侧边栏折叠

1.三级菜单栏

用二级嵌套

<ul class="sidebar-menu" style="" id="nav">
    <li class="treeview" id="nav-collection">
        <a href="">
            <i class="fa fa-anchor"></i><span>一级标题1</span>
            <span class="pull-right-container"><i class="fa fa-angle-right pull-right"></i></span>
        </a>
        <ul class="treeview-menu">
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-circle-o"></i><span>二级标题1</span>
                    <span class="pull-right-container"><i class="fa fa-angle-right pull-right"></i></span>
                </a>
                <ul class="treeview-menu">
                    <li><a href=""><i>三级标题1</i></a></li>
                    <li><a href=""><i>三级标题2</i></a></li>
                </ul>
            </li>
        </ul>
        <ul class="treeview-menu">
            <li class="treeview">
                <a href="#">
                    <i class="fa fa-circle-o"></i><span>二级标题2</span>
                    <span class="pull-right-container"><i class="fa fa-angle-right pull-right"></i></span>
                </a>
                <ul class="treeview-menu">
                    <li><a href=""><i>三级标题1</i></a></li>
                    <li><a href=""><i>三级标题2</i></a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

 

2、解决点击子菜单，侧边栏折叠

<script>
    $('.sidebar-menu li:not(.treeview) > a').on('click', function(){
        var $parent = $(this).parent().addClass('active');                           //3级<li>的父亲:2级<li>->展开
        $parent.siblings('.treeview.active').find('> a').trigger('click');           //2级标题的已经展开的同胞  trigger click??
        $parent.siblings().removeClass('active').find('li').removeClass('active');   //2级标题的已展开同胞->合上
        var $grandparent = $parent.parent().addClass('active');                      //3级<li>的爷爷:1级<li>->展开
        $grandparent.siblings('.treeview.active').find('> a').trigger('click');
        $grandparent.siblings().removeClass('active').find('li').removeClass('active');
    });

    $(window).on('load', function(){
        $('.sidebar-menu a').each(function(){
            var cur = window.location.href;
            var url = this.href;
            if(cur.match(url)){
                $(this).parent().addClass('active')
                        .closest('.treeview-menu').addClass('.menu-open')
                        .closest('.treeview').addClass('active');
            }
        });
    });
</script>

注意：将js放在html body之后，因为onload，需要先加载页面再动态加载js

 

参考：解决AdminLTE菜单栏点击子菜单后刷新页面导致菜单栏折叠的问题