我的结构如下:
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<span>Dashboard</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="index.php">Dashboard v1</a></li>
<li><a href="index2.php">Dashboard v2</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>Layout Options</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
<li><a href="#">Top Navigation</a></li>
<li><a href="#">Boxed</a></li>
<li><a href="#">Fixed</a></li>
<li><a href="#"> Collapsed Sidebar</a></li>
</ul>
</li>
</ul>
我尝试的是
$(".sidebar-menu ul li a").on("click", function() {
$(".active treeview")
.not($(this).parents('li'))
.removeClass('active treeview');
$(this)
.parent()
.addClass('active treeview')
.find("ul.treeview")
.stop("true", "true")
.slideDown()
.addClass('active');
$(this)
.parent()
.siblings()
.find("ul.treeview")
.stop("true", "true")
.slideUp()
.removeClass('active');
});
这里的课程活动树视图&#39;将主菜单显示为活动,类active
显示子菜单处于活动状态。
我尝试使用javascript删除所有其他类,这些类被删除但是在将类添加到特定li
时它不起作用。当我点击某个菜单时,如何编写java脚本,表明子菜单和他的父菜单已被激活。
答案 0 :(得分:0)
试试这个
适用于侧边菜单和树视图
/** 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().siblings().removeClass('active').end().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active').end().addClass('active');