导航菜单项冲突

时间:2018-09-18 18:32:33

标签: javascript jquery html css frontend

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

例如(单击第三个菜单项时);

<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;
}

奇怪的是,当我单击第三个菜单项时,为什么第二个菜单项上的类具有当前菜单项和当前页项索引。

1 个答案:

答案 0 :(得分:0)

您要查看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');

    });