Javascript removeClass/toggleClass 适用于桌面，但不适用于响应式页面

Question

我不久前购买了这个主题，并一直在对其进行拆分和修改以添加/删除功能。一旦从导航栏菜单中单击链接，页面上就会出现这个幻灯片菜单。问题是有一个 X 按钮来关闭菜单，当它被点击时应该从 #btn-offcanvas-menu 元素中切换/删除一个类（#btn-close-canvasmenu 是可点击元素）；它适用于桌面，但不适用于响应式移动网站。在移动设备上切换/删除它的唯一方法是再次单击原始链接。我在这里查看了以下问题以及其他几个问题，包括尝试使用最接近/查找的选项，但似乎没有任何效果。我错过了什么？

期望的行为：当#btn-close-canvasmenu 链接被点击时，isLeft 类应该被切换/移除。它在桌面上，但不在移动设备上。

• Javascript not working on mobile but works on desktop。
• JavaScript - removeClass not working?
• ToggleClass and RemoveClass not working
• JQuery - ToggleClass/AddClass/RemoveClass
• How to toggle class of closest elementjquery toggle class on closest span

这是索引页的相关部分...

    <li id="recent-mobile"><!-- this is hidden by CSS on desktop -->
            <a id="btn-offcanvas-menu" href="#">Recent Results</a>
    </li>
    <li id="recent-results"><!-- this is hidden by CSS on mobile -->
        <div class="header-buttons pull-right hidden-xs hidden-sm">
            <div class="navright-button">
                <a href="#" id="btn-offcanvas-menu"><i class="fa fa-bars">  Recent Results</i></a>
            </div>
        </div>
    </li>

    <!-- Menu OffCanvas right begin -->
    <div class="navright-button">
        <div class="compact-menu-canvas" id="offcanvas-menu">
            <h3>menu</h3><a id="btn-close-canvasmenu"><i class="fa fa-close"></i></a>
            <nav>
                <ul class="clearfix">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="features.html">Features</a></li>
                    <li><a href="pages.html">Pages</a></li>
                    <li><a href="portfolio.html">Portfolios</a></li>
                    <li><a href="shop.html">Shop</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- Menu OffCanvas right close -->

这是 javascript compact.js 文件的相关部分...

$("#btn-close-canvasmenu").on("click", function() {
    $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300), $("a#btn-offcanvas-menu").removeClass("isLeft")
});

$(document).on("click", "#btn-offcanvas-menu, #btn-offcanvas-menu-mobile", {} , function(a){
    var id = $(this).attr('id');
    if (id === "btn-offcanvas-menu-mobile") {
        $("#btn-close-canvasmenu").toggleClass("mobile");
    }

    return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300) : $("#offcanvas-menu").stop().animate({
        right: "0px"
    }, 300), $(this).toggleClass("isLeft"), false
});

编辑（2020 年 2 月 16 日修复）：我编辑了 js 文件文件以反映这个更新的功能：$("#btn-close-canvasmenu").on("click", function()

基本上，修复它的原因是将选择器从 #btn-offcanvas-menu 更改为 #btn-offcanvas-menu。不知道为什么这与使用最接近/查找方法相反，但是一旦我这样做了，它就会正确切换/删除桌面和移动设备上的类。如果有人对为什么 a 对选择器产生影响有任何想法，我将不胜感激，因为我不是 js/jQuery 专家。否则，这可以被认为是关闭的。

Answer 1

将 compact.js 文件中的选择器从 #btn-offcanvas-menu 更改为 a#btn-offcanvas-menu 解决了问题，虽然这有效，但正如 connexo 指出的那样，这是纠正问题的错误方法，原因是重复的 ID。

解决此问题的正确方法是更改​​移动导航栏本身，以便我可以使用专门用于仅出现在那里的移动的 id。

<nav id="mobile-menu" class="site-mobile-menu hidden-lg hidden-md">
    <ul>
        <li id="recent-mobile">
            <a href="#" id="btn-offcanvas-menu-mobile">Recent Results</a>
        </li>
    </ul>
</nav>

接下来，我将填充移动菜单 html 的 js 函数更改为使用 prepend 而不是 append，因此它填充了最近结果链接上方的所有内容...

$("#desktop-menu > ul").children().clone().prependTo($("#mobile-menu > ul")), $("#show-mobile-menu").on("click", function() {
    $(this).toggleClass("clicked"), $("#mobile-menu > ul").stop(true, true).slideToggle()
}); 

然后我调整了 js 函数，如果选择器是 #btn-offcanvas-menu-mobile 以供稍后使用，则将类切换为移动类以用于 #btn-close-canvasmenu...

$(document).on("click","#btn-offcanvas-menu,#btn-offcanvas-menu-mobile", {} , function(a){
    var id = $(this).attr('id');

    if (id === "btn-offcanvas-menu-mobile") {
        $("#btn-close-canvasmenu").toggleClass("mobile");
    }

    return a.preventDefault(), $(this).hasClass("isLeft") ? $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300) : $("#offcanvas-menu").stop().animate({
        right: "0px"
    }, 300), $(this).toggleClass("isLeft"), false
});

最后，我调整了关闭菜单的 js 函数来检查类以确定哪个 id 来切换 isLeft 类...

$(document).on("click","#btn-close-canvasmenu", {} , function(a){
    var id = $(this).attr('id');

    if ($(this).hasClass("mobile")) {
        var container = $("#btn-offcanvas-menu-mobile");
        $("#btn-close-canvasmenu").toggleClass("mobile");
    } else {
        var container = $("#btn-offcanvas-menu");
    }

    $("#offcanvas-menu").stop().animate({
        right: "-260px"
    }, 300), container.removeClass("isLeft")
});