当与 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');
                })
            }
        })
    });

它现在按预期工作！