[英]How to set the parent li class to active when child li is selected
我具有以下菜单结构。 当选择一个子li
,例如“概述”时,我想突出显示父li
,在本例中为“关于我们”。
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop"><a href="#" >Home</a></li>
<li class="drop"><a href="#" >About Us</a>
<ul class="drop-down">
<li class="drop"><a href="#" class="active">Overview</a></li>
<li class="drop"><a href="#" >Security</a></li>
<li class="drop"><a href="#" class="active">Expertise</a></li>
<li class="drop"><a href="#" >Process</a></li>
<li class="drop"><a href="#" >Platform</a></li>
<li class="drop"><a href="c#" >Careers</a></li>
</ul>
</li>
</ul>
</div>
我尝试了以下操作,但没有成功:
$(document).ready(function(){
var pathname = window.location.pathname,
page = pathname.split(/[/ ]+/).pop(),
menuItems = $('.navbar-nav');
menuItems.each(function(){
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.parents('li.a');
if(page == miHrefs) {
miParents.addClass("active").siblings().removeClass('active');
}
});
});
我认为这会有所帮助,请尝试以下操作:
$("li a").on("click", function() {
$(this).parent().parents("li").css("background-color","red");
});
也许您可以尝试:
HTML:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="drop"><a href="#">Home</a>
</li>
<li class="drop"><a href="#">About Us</a>
<ul class="drop-down">
<li class="drop"><a href="/foo">Overview</a>
</li>
<li class="drop"><a href="#">Security</a>
</li>
<li class="drop"><a href="#">Expertise</a>
</li>
<li class="drop"><a href="#">Process</a>
</li>
<li class="drop"><a href="#">Platform</a>
</li>
<li class="drop"><a href="c#">Careers</a>
</li>
</ul>
</li>
</ul>
</div>
JS:
$(document).ready(function () {
var pathname = window.location.pathname,
//page = pathname.split(/[/ ]+/).pop(),
page = "/foo";
menuItems = $('.drop-down li a');
menuItems.each(function () {
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.closest('.drop-down').closest("li").find("a").not(".drop-down li a");
if (page == miHrefs) {
//miParents.addClass("active").siblings().removeClass('active');
miParents.addClass("active");
mi.addClass("active");
}
})
});
menuItems = $('.navbar-nav');
是针对您的主列表而不是列表项,因此您的.each()
循环仅触发一次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.