Question

我有一个菜单，当用户向下滚动一个名为“当前＆＃39;自动添加到单个顶级和子菜单项，但它不会自动添加到子菜单本身的顶级/父级项目。我想确保当用户向下滚动菜单项时，菜单父链接也通过CSS突出显示。

菜单HTML

<nav class="nav-menu w-nav-menu" role="navigation">
<a class="nav-link w-nav-link w--current" href="#home" style="max-width: 1100px;">Home</a><div class="dropdown w-dropdown" data-delay="0" style="max-width: 1100px;"><div class="nav-link nav-link-dropdown w-dropdown-toggle"><div class="nav-dropdown-arrow w-icon-dropdown-toggle"></div><div>Our Home</div></div><nav class="dropdown-list w-clearfix w-dropdown-list">
<a class="nav-dropdown-link w-dropdown-link" href="#history">History</a><a class="nav-dropdown-link w-dropdown-link" href="#facilities">Facilities &amp; Care</a><a class="nav-dropdown-link w-dropdown-link" href="#activities">Activities at the heart of care</a>
<a class="nav-dropdown-link w-dropdown-link" href="#food">Food Glorious Food</a></nav></div>
<a class="nav-link w-nav-link" href="#gallery" style="max-width: 1100px;">Gallery</a>
<a class="nav-link w-nav-link" href="#family" style="max-width: 1100px;">Our Family</a>
<a class="nav-link w-nav-link" href="#reviews" style="max-width: 1100px;">Reviews</a>
<a class="nav-link w-nav-link" href="#news" style="max-width: 1100px;">News</a>
<a class="highlight nav-link w-nav-link" href="#contact" style="max-width: 1100px;">Contact</a>
</nav>

我实际上在这里部分使用了这个演示： -

http://silveroaks.webflow.io/

...但是只有当只有一个子菜单并向前移动时我才能拥有多个子菜单。

这是现有代码： -

<script>
jQuery(window).on("focus load resize scroll",function(e){
jQuery(document).ready(function($){
if ($('.dropdown .nav-dropdown-link.w--current').length > 0) { 
 $(".nav-dropdown-link.w--current").parents(".dropdown").addClass("dcurrent");
 }
 else {
 // this bit currently removes the class from all submenus
$(".dropdown").removeClass("dcurrent");
 }
 });
 });
  </script>

CSS

.dcurrent > .nav-link {
color: white;
background: #005b2f;
}

你会注意到if语句普遍删除了类＆amp; dcurrent＆＃39;来自任何.dropdown，如果有多个下拉列表将不起作用。那么我如何重新编写代码以便它可以使用多个下拉列表 - 因此当用户滚动到每个子菜单之外时，如果存在多个下拉列表，它将删除该类。

Answer 1

您可以迭代每个类元素并检查是否有子元素，如下所示：

$('.dropdown .nav-dropdown-link.w--current').each(function() {
        if ($(this).length) {
            $(this).parents(".dropdown").addClass("dcurrent");
        } else {
            // this bit currently removes the class from all submenus
            $(this).parents(".dropdown").removeClass("dcurrent");
        }
})

在菜单下拉列表中更改父级

1 个答案: