鍍金池/ 問(wèn)答/PHP  HTML/ admin LTE是怎么控制菜單在頁(yè)面刷新之后展開(kāi)的?

admin LTE是怎么控制菜單在頁(yè)面刷新之后展開(kāi)的?

admin LTE是怎么控制菜單在頁(yè)面刷新之后展開(kāi)的?

                <li class="treeview" style="display:block">
                    <a href="#">
                        <i class="fa fa-user"></i>
                        <span>用戶管理</span>
                        <span class="pull-right-container">
                             <i class="fa fa-angle-left pull-right"></i>
                         </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="{{url('/admin/profile')}}"><i class="fa fa-circle-o"></i>管理員</a></li>
                        <li><a href="{{url('/admin/users')}}"><i class="fa fa-circle-o"></i>系統(tǒng)用戶</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>用戶角色</a></li>
                        <li><a href="#"><i class="fa fa-circle-o"></i>用戶權(quán)限</a></li>
                    </ul>
                </li>

                <li class="treeview" style="display:block">
                    <a href="#">
                        <i class="fa fa-pie-chart"></i>
                        <span>內(nèi)容管理</span>
                        <span class="pull-right-container">
                             <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="{{url('admin/article/index')}}"><i class="fa fa-circle-o"></i>文章</a></li>
                        <li><a href=""><i class="fa fa-circle-o"></i>視頻</a></li>
                        <li><a href=""><i class="fa fa-circle-o"></i>標(biāo)簽</a></li>
                        <li><a href=""><i class="fa fa-circle-o"></i>評(píng)論</a></li>
                    </ul>
                </li>

這里 /admin/profile 點(diǎn)開(kāi)之后,頁(yè)面刷新,這個(gè)菜單組是合起來(lái)的。
/admin/article/index點(diǎn)開(kāi)始之后,同樣頁(yè)面刷新,這個(gè)菜單組是打開(kāi)的。不理解這倆規(guī)則有什么區(qū)別,看代碼樣式都是一樣的。

回答
編輯回答
氕氘氚

public\js\admin.js 加入:

$('.sidebar-menu li:not(.treeview) > a').on('click', function(){
        var $parent = $(this).parent().addClass('active');
        $parent.siblings('.treeview.active').find('> a').trigger('click');
        $parent.siblings().removeClass('active').find('li').removeClass('active');
    });

    $(window).on('load', function(){
        $('.sidebar-menu a').each(function(){
            // console.log(this);
            var cur = window.location.href;
            var url = this.href;
            // console.log(cur.match(url));
            if(cur.match(url)){
                $(this).parent().addClass('active')
                    .closest('.treeview-menu').addClass('.menu-open')
                    .closest('.treeview').addClass('active');
            }
        });
    });
2017年11月20日 18:09
編輯回答
好難瘦

resourcesviewsadminlayoutsapp.blade.php

    <script type="text/javascript">
        $(document).ready(function () {
            var path_array = window.location.pathname.split('/');
            var scheme_less_url = '//' + window.location.host + window.location.pathname;
            console.log(scheme_less_url);
            if (path_array[1] == 'dashboard') {
                scheme_less_url = window.location.protocol + '//' + window.location.host + '/' + path_array[1];
            } else {
                scheme_less_url = window.location.protocol + '//' + window.location.host + '/' + path_array[1] + '/' + path_array[2] + '/' + path_array[3];
            }
            $('ul.treeview-menu>li').find('a[href="' + scheme_less_url + '"]').closest('li').addClass('active');  //二級(jí)鏈接高亮
            $('ul.treeview-menu>li').find('a[href="' + scheme_less_url + '"]').closest('li.treeview').addClass('active');  //一級(jí)欄目[含二級(jí)鏈接]高亮
            $('.sidebar-menu>li').find('a[href="' + scheme_less_url + '"]').closest('li').addClass('active');  //一級(jí)欄目[不含二級(jí)鏈接]高亮
        });
    </script>

不是原版,我稍作了修改。

2018年9月5日 17:59