ブートストラップ（AdminLTE）のドロップダウンメニューにアクティブメニューを表示

Question

サイドバーメニューのアクティブなページを強調表示したい。 私はブートストラップ（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

以下の解決策を確認してください。

$(function() { 
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $('.tree li').removeClass('active'); 
    $('[href$="'+url+'"]').parent().addClass("active"); 
    $('.treeview').removeClass('menu-open'); 
    $('[href$="'+url+'"]').closest('li.treeview').addClass("menu-open"); 
}); 

Answer 2

最後に私はそれを理解しました。

以下のスクリプトを含めました。

<script> 
/** add active class and stay opened when selected */ 
var url = window.location; 

// for sidebar menu entirely but not cover treeview 
$('ul.sidebar-menu a').filter(function() { 
    return this.href == url; 
}).parent().addClass('active'); 

// for treeview 
$('ul.treeview-menu a').filter(function() { 
    return this.href == url; 
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active'); 
    </script> 

は、その後、私はクリックしない限り、これは開口部からのリストを防ぐと信じて、すべての<ul class="treeview-menu">に<a href="#"> </a>が含まれています。

これは最終的にすべてをソートしました。

Answer 3

はadminLTEでサイドバーとツリービューのメニューのため、この

を試してみて、それはそこにこんにちは

/** to add active class and remove previously clicked menu */ 
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').end().addClass('active');