我想突出显示侧栏菜单上的活动页面。 我正在使用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>
答案 0 :(得分：10)
/ **试试这个**＆gt; 对于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');
答案 1 :(得分：3)
最后我想出来了！
我在下面添加了脚本;
<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>
然后在所有<a href="#"> </a>中加入了<ul class="treeview-menu">我认为这会阻止列表打开，除非点击。
这最终排序了一切。
答案 2 :(得分：2)
如果有人需要在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>
答案 3 :(得分：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");
});
答案 4 :(得分：1)
尝试一下：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');
答案 5 :(得分：1)
注意：：此代码用于具有引导程序4的新 AdminLTE 3 开发人员
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");
答案 6 :(得分：1)
这是对 AdminLTE 3 的 GMK Hussain 回答的跟进。我在他的代码中遇到了空问题和未定义（未定义，因为我有一些页面根本不在导航链接中）。我会收到 jS 控制台错误。这是我正在使用的：
$(document).ready(function () {
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
//fix for "cannot read property 'style' of null" on windows.location urls not in the nav, indefined on edit/create pages with id number
if (typeof currentLink[0] !== 'undefined') {
if (currentLink[0].closest(".nav-treeview") !== null) {
currentLink[0].classList.add("active");
currentLink[0].closest(".nav-treeview").style.display = 'block';
currentLink[0].closest(".has-treeview").classList.add("active");
currentLink[0].closest(".has-treeview").classList.add("menu-open");
}
}
});我还添加了：currentLink[0].closest(".has-treeview").classList.add("menu-open"); 这将切换更高级别项目的折叠可能，否则您必须在切换关闭之前单击更高级别的导航两次。
答案 7 :(得分：0)
我正在使用此代码根据页面添加活动类。
除了多级子菜单的任何提示如何解决之外，这都可以，
添加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>
答案 8 :(得分：0)
Adminlte4
$(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');
});
答案 9 :(得分：0)
我不希望这个问题被另一个答案所污染，但是它们都不适用于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');
答案 10 :(得分：0)
没有JQuery的解决方案：
JS代码：
df
col1 col2
1 ccd_x29807 29807
2 ccd_x29807 29807
3 ccd_x29807 29807
4 ccd_x20463 20463
HTML代码：
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;
}