Как заставить работать 2 меню, если у них одинаковые классы?

Question

[Artem Pavliienko]

Всем привет. Я адаптирую сайт на битрексе, и возникла сложность. Есть 2 меню

при нажатии на ссылку
<a class="mobpagemenu__button">
Добавляется класс в
<nav class="mobpagemenu mobpagemenu_opened">

код js

(function($) {

    var button = $('.mobpagemenu__button'),
        mobMenuPage = $('nav.mobpagemenu');

   	mobMenuPage.removeClass('hidden');

    button.on('click'), function (e) {
        e.preventDefault();
        e.stopPropagation();

        mobMenuPage.toggleClass('mobpagemenu_opened');

	}

})(jQuery);

В итоге работает только первая меню. А как заставить работать из вдвоем?
Я бы просто добавил класс и через них то же самое прописал, но я без понятия где находятся файлик где он выводится, там все в php.

Answer 1

[Евгений]

Вместо mobMenuPage = $('nav.mobpagemenu'); - написать mobMenuPage = $(this).parent('nav.mobpagemenu');

Comments

[Artem Pavliienko]

не работает(

[Павел Корнилов]

Значит
mobMenuPage = $(this).closest('nav.mobpagemenu')

Answer 2

[Иван Иванов]

скинь ссылку на пример.

Comments

[Artem Pavliienko]

www.lgaircon.ru/support/manuals/multizonalnye-site...

[Иван Иванов]

Artem Pavliienko, не могу найти где ты скрипт js этот прописал. Через дебагер не могу найти.

[Artem Pavliienko]

6254 строка

[Иван Иванов]

Artem Pavliienko, смотри вот так попробовал, переключает классы отлично ) Подходит тебе такое решение ?

[Artem Pavliienko]

Иван Иванов, теперь наоборот, первый не открывает а второй открывает.

[Иван Иванов]

Artem Pavliienko, замени button.click(function() { ... }, на $( ".mobpagemenu__button" ).click(function(). Ошибка из-за того что в переменную button записывается последний созданный объект с классом .mobpagemenu__button из-за этого он сейчас не видит первое меню.

[Иван Иванов]

Artem Pavliienko, вот твоя функция

(function($) {  // по хорошему этого не надо 

    var button = $('.mobpagemenu__button');  // нельзя так делать, если у тебя два объекта с одинаковым классом, так как в переменную button будет записан последний созданный объект с таким классом
    
$( ".mobpagemenu__button" ).click(function() {  // клик по любому объекту с таким классом
                var mobMenuPage = $(this).parent('nav.mobpagemenu'); // получаем родителя текущего объекта по которому был совершён клик.
                mobMenuPage.toggleClass('mobpagemenu_opened'); // переключаем название класса родителя текущего объекта. Один клик добавит класс, второй уберёт. 
      
    });

})(jQuery); // этого тоже

[Иван Иванов]

Artem Pavliienko, неужели не работает?? Это странно, потому что у меня на тесте всё отлично =/

[Artem Pavliienko]

Иван Иванов, Все равно не выходит.
Написал все как у тебя. и вынес нафиг на функцию. Все равно, В среде разработчика видно что он пытается добавить класс, но не выходит. Класс к которому добавляю мигает.

[Иван Иванов]

Artem Pavliienko, попробуй перенести скрипт в footer.php

[Иван Иванов]

Artem Pavliienko, а зачем у тебя в самом конце

$('.mobpagemenu__button').click(function () {
    var mobMenuPage = $(this).parent('.mobpagemenu');
    mobMenuPage.removeClass('hidden'); // вот это для чего? 
    mobMenuPage.toggleClass('mobpagemenu_opened');
});

[Artem Pavliienko]

Иван Иванов, тоже самое... пипец блин

[Иван Иванов]

Artem Pavliienko, блин ну я бы покопался, но просить доступы не буду ))) Мне кажется что где-то ошибка, надо просто покопаться ))

[Artem Pavliienko]

Иван Иванов, наверо, 7500 строк кода js... а если каждому добавить свой скрипт? Т.е.
$('.mobpagemenu__button') приходит массив из 2 эл. и к каждому тоже самое прописать...
Я и так $(this).parent('nav.mobpagemenu'); и $('nav.mobpagemenu'); не фига, только одно меню открывает.

$('.mobpagemenu__button')[0].click(function () {
        var mobMenuPage = $('nav.mobpagemenu');
        mobMenuPage.removeClass('hidden');
        mobMenuPage.toggleClass('mobpagemenu_opened');
    });
    $('.mobpagemenu__button')[1].click(function () {
        var mobMenuPage = $(this).parent('nav.mobpagemenu');
        mobMenuPage.removeClass('hidden');
        mobMenuPage.toggleClass('mobpagemenu_opened');
    });

[Иван Иванов]

Artem Pavliienko, А зачем ты делаешь mobMenuPage.removeClass('hidden');? Вообще так трудно подсказать, но я думаю нашёл бы ошибку )

[Иван Иванов]

Artem Pavliienko, попробуй вот так

var button = $( ".mobpagemenu__button" );
button[0].click(function () {
      var mobMenuPage = $(this).parent('nav.mobpagemenu');
        mobMenuPage.removeClass('hidden');
        mobMenuPage.toggleClass('mobpagemenu_opened');
    });
 button[1].click(function () {
        var mobMenuPage = $(this).parent('nav.mobpagemenu');
        mobMenuPage.removeClass('hidden');
        mobMenuPage.toggleClass('mobpagemenu_opened');
    });

[Artem Pavliienko]

Иван Иванов, этот класс вроде ни за что не отвечает, забей. Тут такая верстка пипец.

var mobMenuPage = $(this).parent('nav.mobpagemenu');
console.log(mobMenuPage)

кликаю на первое и второе меню, в консоле выводится только первое

[Artem Pavliienko]

joxi.ru/MAjQqjPHvDyMD2

[Artem Pavliienko]

Иван Иванов, а через тим вивер сможешь глянуть?

[Иван Иванов]

только после работы, у меня сейчас 16.00, в 20.00 могу посмотреть из дома, а то на работе сижу ) по шапке получу. Если хочешь найди меня через ВК. Иван Иванов, Краснодар, фотка чувак в жёлтых очках с усами в лесу. Очки и усы мультяшные. Самому интересно теперь разобраться )

[Иван Иванов]

Artem Pavliienko, пробовал парент менять на .closest?

[Иван Иванов]

Artem Pavliienko, если прям заморочка, создай просто второй шаблон компонента меню, и пропиши им разные id. А потом обращайся уже по id. Или это прям беда?