问题出在第二和第三个菜单项上。每当我单击第三个菜单项时,第二个菜单项会自动与第三个菜单项一起被选中/激活。但是,其他菜单项不会发生这种情况。
例如(点击第三个菜单项时);
<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;
}
奇怪的是,为什么当我点击第三个菜单项时,第二个菜单项上的类有当前菜单项和当前页面项索引。
最佳答案
您有要查看的 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');
});
关于javascript - 导航菜单项冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52392663/