當與 href 錨位於同一頁面時，從導航中的非活動項目中刪除“當前菜單項”class

Question

我的 Betheme WordPress 站點上有一個菜單： https://cth.magnet.dev/manitoba/

<div class="menu_wrapper">
    <nav id="menu">
        <ul id="menu-primary-menu" class="menu menu-main">
            <li id="menu-item-91"
                class="explore menu-item menu-item-type-custom menu-item-object-custom current-menu-item"><a
                    href="/manitoba/#explore"><span>Explore Trades</span></a></li>
            <li id="menu-item-92"
                class="build menu-item menu-item-type-custom menu-item-object-custom current-menu-item last"><a
                    href="/manitoba/#build"><span>Build Skills</span></a></li>
            <li id="menu-item-93"
                class="connect menu-item menu-item-type-custom menu-item-object-custom current-menu-item last"><a
                    href="/manitoba/#connect"><span>Connect</span></a></li>
        </ul>
    </nav><a class="responsive-menu-toggle " href="#"><i class="icon-menu-fine"></i></a>
</div>

該菜單在任何頁面上都可以正常工作，除非我實際上在曼尼托巴頁面上。 正如您在每個列表項的類中所見，它們都具有current-menu-item class，我假設這是因為這些錨標記都在該頁面上可用。

這會導致我們使用的一些 CSS 出現問題，它會突出顯示當前活動的菜單項。 具體來說，將是以下這些項目：

    #Top_bar .menu > li.current-menu-item > a:after,
    #Top_bar .menu > li.current_page_ancestor > a:after,
    #Top_bar .menu > li.hover > a:after{opacity:1}

因為它們都獲得了current-menu-item class，所以在該頁面上它們都始終帶有下划線。

有沒有辦法可以使用 JS 從那些不活動的項目中刪除 class ？ 我發現這篇文章似乎准確地描述了我的問題，但代碼不適用於我的情況。 我假設這是因為本文中的 JS 是專門為 Divi 主題開發的，就像我在 Betheme 上一樣。 我仍然是初學者開發人員，但代碼看起來對任何一個主題都不太具體，所以至少，是否可以重構此代碼以實現相同的目標？

<script>
(function ($) {
    $(document).ready(function () {
        var menu_items_links = $(".nav li a");
        menu_items_links.each(function () {
            if ($(this).is('[href*="#"]')) {
                $(this).parent().removeClass('current-menu-item current-menu-ancestor');
                $(this).click(function () {
                    var current_index = $(this).parent().index(),
                        parent_element = $(this).closest('ul');
                    parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
                    $(this).parent().addClass('current-menu-item current-menu-ancestor');
                })
            }
        })
    });
})(jQuery);
</script>

我也對替代解決方案持開放態度，它不需要是 JS。

Answer 1

所以我意識到我復制的代碼沒有正確的 class 順序來識別我的菜單項。 我編輯了var menu_items_links的值，並對代碼的初始行進行了一些細微的更改以生成以下內容：

jQuery(document).ready(function ($) {

        var menu_items_links = $(".menu li a");
        menu_items_links.each(function () {
            if ($(this).is('[href*="#"]')) {
                $(this).parent().removeClass('current-menu-item current-menu-ancestor');
                $(this).click(function () {
                    var current_index = $(this).parent().index(),
                        parent_element = $(this).closest('ul');
                    parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
                    $(this).parent().addClass('current-menu-item current-menu-ancestor');
                })
            }
        })
    });

它現在按預期工作！