Конфликт пунктов меню навигации

Question

Проблема со вторым и третьим пунктами меню.Всякий раз, когда я щелкаю третий элемент меню, второй элемент автоматически выбирается / активируется вместе с третьим.Однако этого не происходит с другими пунктами меню.

Например (при нажатии на третий пункт меню);

<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 и current-Элемент страницы индексируется, когда я нажимаю на третий.

Answer 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');

    });