gpt4 book ai didi

javascript - 当我点击其子菜单时,保持父菜单突出显示

转载 作者:太空宇宙 更新时间:2023-11-04 03:56:44 25 4
gpt4 key购买 nike

我想在我的网站上实现一个菜单。

我需要在单击子菜单时突出显示父菜单。

当我单击父菜单时,它会突出显示。但是当我点击子菜单时,它的父菜单没有突出显示。

这是我的代码。请帮助我。

<html>
<head>
<script>

$(document).ready(function(){
$(' #menu-wplook-main-menu').find('li a').click(function(){
$(' #menu-wplook-main-menu').find('li a').removeClass('active');
if($(this).closest('ul').hasClass('sub-menu')){
$(this).parents('li ').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
});

</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<script src="js/base.js"></script>
<div class="wrapper">
<p class="site-title"><a href="index.php"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></a></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu"class="parent" >
<li class="menu-item"><a href="#"id="menu-item1">WHO WE ARE</a>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><a href="about-founder.php">ABOUT FOUNDER</a></li>
<li class="sub-menu-item2"><a href="about-iab-growth.php">ABOUT IAB</a></li>
<!--<li class="menu-item "><a href="team-iab.php">TEAM IAB</a></li>-->
</ul>
</li>
<li class="menu-item current"><a href="#">WHAT WE DO</a>
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 "><a href="education.php">EDUCATION</a></li>
<li class="sub-menu-item4"><a href="career-skills.php">CAREER &amp; SKILL TRAINING</a></li>
<li class="sub-menu-item5"><a href="residential-services.php">RESIDENTIAL SERVICES</a></li>
<li class="sub-menu-item6"><a href="support-services.php">SUPPORT SERVICES</a></li>
<li class="sub-menu-item7"><a href="employment.php">EMPLOYMENT</a></li>
</ul>
</li>
<li class="menu-item"><a href="award_slide.php">AWARDS &amp; RECOGNITION</a></li>
<li class="menu-item4"><a href="http://theiab.org/awardsandnews/category/newsandevents/">NEWS &amp; EVENTS</a></li>
<li class="menu-item5"><a href="contact.php">CONTACT</a></li>
</ul>
</nav>
<div class="clear"></div>
</div>
</body>
</html>

最佳答案

这是一个工作 fiddle :http://jsfiddle.net/KPET6/

javascript 更改:

$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});

关于javascript - 当我点击其子菜单时,保持父菜单突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22686372/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com