zoukankan      html  css  js  c++  java
  • AdminLTE3动态侧边栏实现

    使边栏在被选中时动态激活。

    由于AdminLTE3的CSS类名与2的不同,之前的JS代码不能用了。

    代码如下:

    <script>
        $(function(){
        /** add active class and stay opened when selected */
        var url = window.location;
        // for sidebar menu entirely but not cover treeview
        $('ul.nav-sidebar a').filter(function() {
            return this.href == url;
        }).addClass('active');
        // for treeview
        $('ul.nav-treeview a').filter(function() {
            return this.href == url;
        }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
    });
    </script>
    
    <!-- Sidebar Menu -->
    <nav class="mt-2 sidebar-menu">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!-- Add icons to the links using the .nav-icon class
    with font-awesome or any other icon font library -->
            <li class="nav-item has-treeview">
                <a href="#" class="nav-link">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        SiderBar1
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                        <a href="/show" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>列表</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/showAdd" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>添加配置</p>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item has-treeview">
                <a href="#" class="nav-link">
                    <i class="nav-icon fas fa-tachometer-alt"></i>
                    <p>
                        SiderBar2
                        <i class="right fas fa-angle-left"></i>
                    </p>
                </a>
                <ul class="nav nav-treeview">
                    <li class="nav-item">
                        <a href="/show2" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>列表</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/showAdd2" class="nav-link">
                            <i class="far fa-circle nav-icon"></i>
                            <p>添加配置</p>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="/logout" class="nav-link">
                    <i class="nav-icon fas fa-th"></i>
                    <p>
                        退出
                    </p>
                </a>
            </li>
        </ul>
    </nav>
    

    JS代码来自 https://github.com/ColorlibHQ/AdminLTE/issues/2068

  • 相关阅读:
    Using the proxy page
    ArcGIS 帮助 10.1 几何服务
    【转】地图投影系列介绍(三)_ 地图投影
    最简单的闰年函数
    JSP的编码问题
    和苗波玩吉他英雄,还有诺拉斯战士
    倒底是用接口,还是继承类?
    收集的两个Winform三层结构的例子
    在vs.net 2005 中 像JBuilder,Eclipse那样格式化代码
    JSP比ASP好的几个地方
  • 原文地址:https://www.cnblogs.com/greycdoer0/p/14096718.html
Copyright © 2011-2022 走看看