Javascript removeClass / toggleClass работает на рабочем столе, но не реагирует на страницу

Question

Я купил эту тему некоторое время назад, и я ее подрезаю и модифицирую, чтобы добавить / удалить функциональность. Это меню слайдов появляется на странице после щелчка по ссылке в меню панели навигации. Проблема в том, что есть кнопка X, чтобы закрыть меню, которое должно переключать / удалять класс из элемента # btn-offcanvas-menu при щелчке по нему (# btn-close-canvasmenu является интерактивным элементом); он работает на рабочем столе, но не на адаптивном мобильном сайте. Единственный способ его переключения / удаления на мобильном телефоне - повторное нажатие на исходную ссылку. Я посмотрел на приведенные ниже вопросы и некоторые другие, в том числе пытаясь использовать самые близкие варианты, но ничего не помогло. Чего мне не хватает?

Желаемое поведение: класс isLeft должен переключаться / удаляться при нажатии на ссылку # btn-close-canvasmenu. Это на рабочем столе, но не на мобильном.

• Javascript не работает на мобильном телефоне, но работает на рабочем столе .
• JavaScript - removeClass not работает?
• ToggleClass и RemoveClass не работают
• JQuery - ToggleClass / AddClass / RemoveClass
• Как переключать класс ближайшего элемента jquery Переключать класс на ближайшем промежутке

Это релевантная часть страницы индекса ...

    <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
});

EDIT (исправлено 16.02.20): я редактировал файл js файл, отражающий эту обновленную функцию: $("#btn-close-canvasmenu").on("click", function()

По сути, исправлено то, что он изменял селектор с # btn-offcanvas-menu на # btn-offcanvas-menu. Не уверен, почему это работает, в отличие от использования метода closest / find, но как только я это сделал, он корректно переключал / удалял класс как на рабочем столе, так и на мобильном. Если у кого-то есть какие-либо мысли о том, почему a сделал разницу с селектором, я был бы признателен за отзыв, поскольку я не являюсь экспертом по js / jQuery. В противном случае это можно считать закрытым.

Answer 1

Изменение селектора в компактном. js файле из # btn-offcanvas-menu на # btn-offcanvas-menu решило проблему, и хотя это работало, это был неправильный способ исправить проблему, как указал connectxo из-за повторяющихся идентификаторов.

Правильный способ решить эту проблему - изменить саму панель навигации для мобильных устройств, чтобы я мог использовать идентификатор специально для мобильного устройства, которое появилось только там.

<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>

Далее я изменил функцию js, которая заполняла html для мобильного меню, чтобы использовать 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-close-canvasmenu, если селектор был # btn-offcanvas-menu-mobile, который будет использоваться позже ...

$(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, которая закрывала меню, чтобы проверить класс, чтобы определить, какой идентификатор переключать класс 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")
});