twitter-bootstrap 在 Bootstrap (AdminLTE) 的下拉菜单上显示活动菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45204906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing active menu on a drop down side menu on Bootstrap (AdminLTE)
提问by Syntax101
I want to highlight the active page on the side bar menu. I am using Bootstrap (AdminLTE).
我想突出显示侧栏菜单上的活动页面。我正在使用 Bootstrap (AdminLTE)。
I have tried a number of javascript ways to no avail. Kindly anyone help out. Below is the side bar menu.
我已经尝试了许多 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>
I tried with this javascript code but ends up opening all the dropdowns. All the same, it does highlight the current item. But I would want the other items remain closed and only active remains open.
我尝试使用此 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>
回答by sssanjaya
/** Try this ** > for sidebar and treeview menu in adminLTE, it will add active when clicked and remove any previous active class /** to add active class and remove previously clicked menu */
/** 试试这个 ** > 对于 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');
回答by Syntax101
Finally I figured it out!
终于我想通了！
I included the script below;
我在下面包含了脚本；
<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>
Then included <a href="#"> </a>on all <ul class="treeview-menu">I believe this prevented the lists from opening unless clicked.
然后包括<a href="#"> </a>在所有<ul class="treeview-menu">我相信这会阻止列表打开，除非单击。
This ultimately sorted everything.
这最终整理了一切。
回答by John
Try this:v2.3.0
试试这个：v2.3.0
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');
回答by GMK Hussain
NOTE:This code for new AdminLTE 3dev with bootstrap 4
注意：此代码适用于带有引导程序 4 的新AdminLTE 3dev
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
currentLink[0].classList.add("active")
currentLink[0].closest(".nav-treeview").style.display="block";
currentLink[0].closest(".has-treeview").classList.add("active");
回答by Shyam Shingadiya
Please check below-mentioned solution :
请检查下面提到的解决方案：
<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>
回答by ghulam rasool
I'm using this code to add active class depending of the page.
我正在使用此代码根据页面添加活动类。
This is working ok except for multi level submenus any clue how to fix this,
这工作正常，除了多级子菜单如何解决这个问题的任何线索，
add activeclass and stay opened when selected
添加active课程并在选择时保持打开状态
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;
}).closest('.treeview').addClass('active');
**HTML**
<li class="treeview">
<a href="#">
<i class="fa fa-gears"></i>
<span>Settings</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li>
<a href="#">
<i class="fa fa-bars"></i>
Specials Settings
</a>
<ul class="treeview-menu">
<li><a href="setting1.php">Setting 1</a></li>
</ul>
</li>
</ul>
</li>
回答by Jamir Peroba
Adminlte4
管理员 4
$(document).ready(function(){
const url = window.location;
$('ul.nav-sidebar a').filter(function() {
return this.href == url;
}).parent().addClass('active');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .nav-treeview").addClass('menu-open');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).addClass('active');
$('li.has-treeview a').filter(function() {
return this.href == url;
}).addClass('active');
$('ul.nav-treeview a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .nav-treeview").children(0).addClass('active');
});
回答by erhan355
I don't want this question to be polluted by another answer but none of them worked for AdminLTE-3.0.1.So I created an updated solution.Here is
我不希望这个问题被另一个答案污染，但它们都不适用于 AdminLTE-3.0.1。所以我创建了一个更新的解决方案。这里是
const url = window.location;
/*remove all active and menu open classes(collapse)*/
$('ul.nav-sidebar a').removeClass('active').parent().siblings().removeClass('menu-open');
/*find active element add active class ,if it is inside treeview element, expand its elements and select treeview*/
$('ul.nav-sidebar a').filter(function () {
return this.href == url;
}).addClass('active').closest(".has-treeview").addClass('menu-open').find("> a").addClass('active');
回答by rtstorm
If anyone need to fix this on Admin LTE 4 this is working:
如果有人需要在 Admin LTE 4 上解决这个问题，这可以正常工作：
<script>
/** 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>
回答by dnzbrkyrk
Solution without JQuery :
没有 JQuery 的解决方案：
JS Code :
JS代码：
function isActiveElement (route, device, domain, classAsked) {
var pathName = window.location.pathname;
var routeName = pathName.split("/")[1];
var deviceName = pathName.split("/")[2];
var domainName = pathName.split("/")[3];
var className = ""
if(route !== "" && routeName === route) {
className = classAsked;
}
if(domain !== "" && domainName !== domain) {
className = "";
}
if(device !== "" && deviceName !== device) {
className = "";
}
return className;
}
HTML Code :
HTML代码：
<li className={"nav-item has-treeview " + isActiveElement(route, "", domain, "menu-open")}>
<a href="#" className={"nav-link " + isActiveElement(route, "", domain, "active")}>
