单击子菜单时设置 WordPress 菜单处于活动状态答案

【问题标题】：Set WordPress menu active when sub-menu is clicked单击子菜单时设置 WordPress 菜单处于活动状态
【发布时间】：2017-12-20 05:41:20
【问题描述】：

我有一个带有下拉菜单的 WordPress 菜单。我有 CSS 代码来在选定的菜单项处于活动状态时对其进行下划线。这适用于根级菜单项和子菜单项。我想做的是在单击其中一个子菜单项时将下拉菜单设置为活动状态。我正在 jQuery 中尝试这个。

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

它几乎可以工作。当我单击子菜单项时，我可以看到下拉菜单处于活动状态，但随后又回到不活动状态。我认为发生这种情况是 jQuery 触发并将下拉菜单设置为活动，然后页面重新加载并且活动被清除。

知道如何让它坚持下去吗？

【问题讨论】：

标签： jquery css wordpress

【解决方案1】：

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

所以你可以做的是，当你登陆页面时，有一个 jQuery 函数来检查是否有任何子菜单项处于活动状态，然后将类添加到父级。

由于我不确定这个定制菜单还是 WP 菜单，我们假设您的结构如下：

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

此时你可以做的是使用jQuery.closest('.parent-menu') 找到具有类 parent-menu 的最接近的父元素，并且在您发现需要向该元素添加类之后。所以它可能看起来像这样：

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

请注意，我不确定您的结构，因此您可能需要更新结构，但这应该可以正常工作。

【讨论】：

【解决方案2】：

想了想，这才发现自己想多了。我需要在页面加载后查看子菜单项。这是我做错的第一件事。之后，我需要做的就是获取子菜单项列表，检查其中是否有任何活动类，如果有，请将下拉项设置为活动。下面是为我执行此操作的代码。有没有更好的办法？

$(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;
        }
    })
})

【讨论】：