设置WordPress菜单当点击子菜单时激活

我有一个WordPress下拉菜单。处于活动状态时，我使用CSS代码在所选菜单项下划线。这适用于根级菜单项和子菜单项。我想要做的就是当点击一个子菜单项时，将下拉菜单设置为活动状态。我试图在jQuery中。设置WordPress菜单当点击子菜单时激活

jQuery(function($) { 
    $(".navbar .nav .nav-item.dropdown li").click(function() { 
     $(".navbar .nav .nav-item.dropdown").addClass('active'); 
    }); 
}

它几乎可以工作。当我点击子菜单项时，我可以看到下拉菜单变为活动状态，但是直接返回到非活动状态。我认为发生的事情是jQuery触发，并将下拉菜单设置为活动状态，然后重新加载页面，并且活动消失。

任何想法如何让它坚持下去？

来源

2017-07-15 Scott Kilbourn

想过这件事后，我意识到这是严重超越这个。我需要在页面加载后查看子菜单项。这是我做错了第一件事。之后，我所需要做的就是获取一个子菜单项列表，检查它们中是否有活动类，如果有，请将下拉列表项设置为活动状态。下面是为我做这个的代码。有没有更好的办法？

$(window).load(function (e) { 
    var listItems = $('.navbar ul li ul.dropdown-menu .nav-item'); 

    //Loop the listitems and check to see if any are active. 
    $.each(listItems, function(key, litem) { 
     if ($(litem).hasClass('active')) { 
      $(".navbar .nav .nav-item.dropdown").addClass('active'); 
      return false; 
     } 
    }) 
})

来源

2017-07-16 02:02:49

它被删除的原因是因为您在点击时运行功能，而不是在加载新子页面时运行功能。

所以你可以做的是，当你登陆页面有一个jQuery函数，检查是否有任何子菜单项是活动的，然后addClass父。

正如我不知道这是定制菜单或WP菜单让我们假设你有结构是这样的：

<ul class="parent-menu"> 
    <li>Parent Item 
    <ul> 
     <li class="someSubMenuClass active">Child Item</li> 
    </ul> 
    <li> 
</ul>

，你可以在这个时候做的是使用jQuery.closest('.parent-menu') 找到与一流的最接近的父元素父母菜单，并在你发现你需要添加类到那个元素。因此，它可能是这样的：

$(document).ready(function() { 
    $("li.someSubMenuClass.active").closest('.parent-menu').addClass('active'); 
});

请注意，我不知道你的结构，所以你可能需要更新结构，但这个应该可以正常工作。

来源

2017-07-17 10:48:14

设置WordPress菜单当点击子菜单时激活

回答

相关问题