Question

我有一个带下拉列表的WordPress菜单。我有CSS代码在活动时为所选菜单项加下划线。这适用于根级菜单项和子菜单项。我想要做的是在单击其中一个子菜单项时将下拉列表设置为活动状态。我在jQuery中尝试这个。

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

它几乎可以工作。当我单击子菜单项时，我可以看到下拉列表处于活动状态，但它会立即返回到不活动状态。我认为发生的事情是jQuery触发并将下拉列表设置为活动状态，然后页面重新加载并且活动状态被消除。

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

Answer 1

在考虑之后，我意识到这严重过度思考了这一点。我需要在页面加载后查看子菜单项。这是我做错的第一件事。之后，我需要做的就是获取一个子菜单项列表，检查它们是否有活动类，如果有，则将下拉项设置为活动状态。以下是为我执行此操作的代码。还有更好的方法吗？

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

Answer 2

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

所以你可以做的就是当你在页面上有一个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') 找到最近的父元素与类父菜单，并在您发现需要addClass到该元素后。所以它可能看起来像这样：

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

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

单击子菜单时，将WordPress菜单设置为活动状态

2 个答案: