我有一个有3个级别的菜单,我想为第一个活动li使用一个类,为所有其他后续li使用第二个类。当我点击一个选择时,级别3将在整个路径上保持活动(级别1、级别2、级别3)。如果我单击级别2上的选择以保持活动状态直到级别2。
我有以下内容:
$(document).ready(function(){
$('.sf-menu li a').each(function(index) {
if((this.pathname.trim() == window.location.pathname))
$(this).parent().addClass("selected");
var next_li = $(this).parent().next();
$('a', next_li).addClass("selected2");
});
});
我想我这次拿到了,它有点脏,但它能工作。
首先添加类,以便可以识别第一、第二和第三级<li>
元素。在foreach中执行,或在菜单中使用任何bucle(如果没有这样的bucle,则手动执行):
<ul id="navlist" >
<li id="home" class="firstLevel">
<a class="nav" href="home">Home</a>
<ul class="secondLevel">
<li class="secondLevel">
<a class="nav2" href="home">sub-Home1</a>
<ul>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
<li class="thirdLevel"><a class="nav3" href="home">sub-sub-Home1></a></li>
</ul>
</li>
<li><a class="nav2" href="home">sub-Home2</a></li>
</ul>
</li>
<li id="about" class="firstLevel">
<a class="nav" href="about-us">About Us</a>
</li>
</ul>
然后使用jQuery closest
。它遍历DOM树并匹配最近的项,您可以传递一个选择器(我们刚刚创建的firstLevel或secondLevel类):
$('#navlist a').on('click', function (e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$('#navlist a').removeClass('selected2');
$(this).closest('.secondLevel').children('a').addClass('selected2');
$(this).closest('.firstLevel').children('a').addClass('selected2');
$(this).addClass('selected');
});
然后将!important
添加到选定的类中(因此,当存在类似于About Us链接中的共线时,即为应用的类)。这是最脏的部分。
检查工作小提琴:https://jsfiddle.net/4r5vg/661/