当子菜单已经'active'时，如何将'active'添加到菜单父菜单

Question

我尝试使用我在下面帖子中附加的jquery代码。我不知道代码是否缺少某些内容，但到目前为止还没有运气。如果您可以重新创建新的编码，请提供帮助。 谢谢。

$(document).ready(function() {
$('.wsite-menu-wrap ul li .wsite-menu-subitem.active').parent().closest('.sidebar-nav .dropdown').addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav sidebar-nav">
<div class="nav-wrap">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<div class="dropdown open">
<span class="dropdown-link"><a href="/women" class="wsite-menu-item **ADD 'ACTIVE' HERE**">WOMEN</a></span>
</div>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-subitem-wrap ">
<a href="/accessory" class="wsite-menu-subitem ***active***">ACCESSORY</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="/dress" class="wsite-menu-subitem ">DRESS</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Answer 1

您可以导航回最近的li.has-submenu，该将成为submenu的根父级，然后找到相关的a标签，如下所示并addClass。

$(document).ready(function() {
$('.wsite-menu-wrap ul li .wsite-menu-subitem.active').closest('li.has-submenu').find('.dropdown-link a').addClass('active');

});

.active{
background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav sidebar-nav">
<div class="nav-wrap">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<div class="dropdown open">
<span class="dropdown-link"><a href="/women" class="wsite-menu-item">WOMEN</a></span>
</div>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-subitem-wrap ">
<a href="/accessory" class="wsite-menu-subitem active">ACCESSORY</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="/dress" class="wsite-menu-subitem ">DRESS</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Answer 2

将其更改为此

$(document).ready(function(){
$('.wsite-menu-subitem.active').parents().find('a.wsite-menu-item').addClass('active');
});

Answer 3

我认为在 DOM 树上上下搜索不是一个好的做法。 jQuery被构建为按类或id挂钩。对于每个子菜单项，我都添加了一个类"女装"，"男装"，然后在标题链接中添加了同名的ID。 单击任何子菜单项时，它会突出显示标题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.active {
color: orange;
}
</style>
<div class="nav sidebar-nav">
<div class="nav-wrap">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<div class="dropdown open">
<span class="dropdown-link">
<a id="womens" href="#" class="wsite-menu-item active">WOMEN</a>
</span>
</div>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-subitem-wrap">
<a href="#" class="wsite-menu-subitem womens active">ACCESSORY</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="#" class="wsite-menu-subitem womens">DRESS</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="#" class="wsite-menu-subitem womens">SHOES</a>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<div class="dropdown open">
<span class="dropdown-link">
<a id="mens" href="#" class="wsite-menu-item">MEN</a>
</span>
</div>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-subitem-wrap ">
<a href="#" class="wsite-menu-subitem mens">WATCHES</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="#" class="wsite-menu-subitem mens">PANTS</a>
</li>
<li class="wsite-menu-subitem-wrap ">
<a href="#" class="wsite-menu-subitem mens">SHOES</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.wsite-menu-subitem').on('click', function(){
$('.wsite-menu-subitem').removeClass('active')
let self = $(this)
self.addClass('active')
if (self.hasClass('mens')) {
$('#mens').addClass('active')
$('#womens').removeClass('active')
}
if (self.hasClass('womens')) {
$('#womens').addClass('active')
$('#mens').removeClass('active')
}
})
});
</script>