在Bootstrap(AdminLTE)的下拉菜单中显示活动菜单

Question

我想突出显示侧栏菜单上的活动页面.我正在使用Bootstrap(AdminLTE).

我尝试了一些javascript方法无济于事.请有人帮忙.下面是侧栏菜单.

<ul class="sidebar-menu" >
  <li class=""><a href="/dashboard"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a> </li>
  <br>
  <li class="treeview">
    <a href=""> <i class="fa fa-cogs"></i> <span> Account Configuarion</span> <i class="fa fa-angle-left pull-right"></i> </a>
    <ul class="treeview-menu">
      <li class="treeview">
        <a href=""> <i class="fa fa-mobile fa-lg"></i> <span>M-PESA C2B</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li class=""><a href="/c2b"><i class="fa fa-arrow-circle-right"></i>C2B Settings</a></li>
          <li class=""><a href="/online-checkout"><i class="fa fa-arrow-circle-right"></i> Online CheckOut</a></li>
          <li class=""><a href="/stk-push"><i class="fa fa-arrow-circle-right"></i> STK Push</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href=""> <i class="fa fa-mobile fa-lg"></i> <span>M-PESA B2C</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li><a href="b2c-documentation"><i class="fa fa-arrow-circle-right"></i>  B2C Settings</a></li>
        </ul>
      </li>
      <li class="treeview">
        <a href=""> <i class="fa fa-send"></i> <span>SMS</span> <i class="fa fa-angle-left pull-right"></i> </a>
        <ul class="treeview-menu">
          <li class=""><a href="/sms-setting"><i class="fa fa-arrow-circle-right"></i>SMS Settings</a></li>
          <li class=""><a href="/subscription"><i class="fa fa-arrow-circle-right"></i>Subscription SMS Settings</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="treeview ">
    <a href="#"> <i class="fa fa-cogs"></i> <span>Account Info</span> <i class="fa fa-angle-left pull-right"></i> </a>
    <ul class="treeview-menu">
      <li class=""><a href="buy-units"><i class="fa fa-arrow-circle-right"></i> Buy Units</a></li>
      <li class=""><a href="/account-details"><i class="fa fa-arrow-circle-right"></i>Account Details</a></li>
      <li class=""><a href="/users"><i class="fa fa-arrow-circle-right"></i>Account Users</a></li>
    </ul>
  </li>
</ul>

我试过这个javascript代码,但最终打开所有的下拉菜单.尽管如此,它确实突出了当前项目.但是我希望其他项目保持关闭状态,只有活动状态保持打开状态.

<script>
    $(document).ready(function() {
        var url = window.location; 
        var element = $('ul.sidebar-menu a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
        if (element.is('li')) { 
             element.addClass('active').parent().parent('li').addClass('active')
         }
    });
    </script>

Answer 1

/**尝试这个**>对于adminLTE中的侧边栏和树视图菜单,它会在点击时添加活动并删除任何以前的活动类/**以添加活动类并删除以前单击的菜单*/

var url = window.location;
// for sidebar menu but not for treeview submenu
$('ul.sidebar-menu a').filter(function() {
    return this.href == url;
}).parent().siblings().removeClass('active').end().addClass('active');
// for treeview which is like a submenu
$('ul.treeview-menu a').filter(function() {
    return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active menu-open').end().addClass('active menu-open');

Answer 2

请检查下面提到的解决方案：

<script type="text/javascript">
   $(document).ready(function(){
  var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
  $('.treeview-menu li').removeClass('active');
  $('[href$="'+url+'"]').parent().addClass("active");
  $('.treeview').removeClass('menu-open active');
  $('[href$="'+url+'"]').closest('li.treeview').addClass("menu-open active");
});
</script>