导航菜单项冲突答案

【问题标题】：Navigation menu items conflict导航菜单项冲突
【发布时间】：2019-02-22 20:23:09
【问题描述】：

问题在于第二个和第三个菜单项。每当我单击第三个菜单项时，第二个菜单项会自动与第三个菜单项一起被选中/激活。但是，其他菜单项不会发生这种情况。

例如（点击第三个菜单项时）；

<ul id="menu-1" class="navmenu">

   <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464">
     <a href="#">list item 1</a>
   </li>

   <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-456 current_page_item menu-item-466">
     <a href="#">list item 2</a>
   </li>

   <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-446">
     <a href="#">list item 3</a>
   </li>

   <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-448">
     <a href="#">list item 4</a>
   </li>

</ul>

注意：我不知道这些不同的点击类是从哪里来的。

我尝试在单击时添加一个活动类并相应地设置样式，但这不起作用。比如；

JQuery(function(){
    jQuery('.navmenu li').on('click', function(){
            jQuery(this).addClass('active').siblings().removeClass('active');

    });

});

这是css：

.navmenu .current_page_item>a, .navmenu .current_page_ancestor>a, .navmenu .current-menu-item>a, .navmenu .current-menu-ancestor>a {
    outline: none;
    background-color: #7CD0AE;
    color: #fff;
}

奇怪的是为什么当我点击第三个菜单项时，第二个菜单项上的类有 current-menu-item 和 current-page-item 索引。

【问题讨论】：

我的猜测是您的 css 与链接重叠，我无法重新创建您的问题。一切正常。
你说“它不起作用”是什么意思？你的意思是你期望看到的“活动”类的行为被错误地应用了吗？如果是这样，正如所指出的，它可能是一个 CSS 问题。（您的 CSS sn-p 根本没有提到“活动”类。）或者您是否检查了元素并发现这些类没有被正确应用/删除？据我所知，JS代码很好。
@RobinZigmond 实际上我正在尝试用上面的 JS 代码覆盖，以便类在点击时被索引为活动状态，但这并没有发生。感谢您的回复！
听起来很奇怪——你有链接（codepen/jsfiddle 或类似的）可以演示吗？正如我所说的 JS 代码应该完全符合您的要求 - 所以现在我想知道第二个和第三个元素是否可能在页面上以某种方式重叠，所以当您单击第三个元素时，您也会无意中单击第二个元素？但这只是猜测，没有看到您所描述的内容。
这里是；jsfiddle.net/brmz43nd/2/#&togetherjs=0daUHzbtS4

标签： javascript jquery html css frontend

【解决方案1】：

您有要查看的 CSS 吗？相关代码的 github 或 jsfiddle 会更容易提供帮助。

我复制了您在此处的内容，如果您将鼠标悬停在每个列表项上，您可以看到它们具有正确的链接。似乎它可能在 css 中，或者这里没有共享的东西。 https://jsfiddle.net/xpvt214o/814134/

下面的代码是因为它们让我在链接 jsfiddle 时添加代码

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})

JQuery(function(){
    jQuery('.navmenu li').on('click', function(){
            jQuery(this).addClass('active').siblings().removeClass('active');

    });

【讨论】：