在Bootstrap(AdminLTE)上的下拉菜单中显示活动菜单
问题描述:
我想突出显示侧栏菜单上的活动页面。 我正在使用Bootstrap(AdminLTE)。在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>
答
请检查下面提到的解决方案。
$(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");
});
答
最后我想通了!
我包括下面的脚本;
<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>
。
这最终排序的一切。
答
尝试点击时这个
在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');
你好..我也试试这个但不打开子菜单。 – Syntax101
请检查我的更新答案,我希望它能帮助你。 –