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>
