AdminLTE3動態側邊欄實現
阿新 • • 發佈:2020-12-07
使邊欄在被選中時動態啟用。
由於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>