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