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

Question

[Cheizer]

Друзья, простой вопрос знатокам JQUERY.
Есть мобильное меню, по клику на элементе, присваивается класс .mobile-submenu-active и вложенный список раскрывается, а другой список ЕСЛИ ОТКРЫТ сворачивается. НО происходит какая то ерунда, не могу удалить класс .mobile-submenu-active в уже открытых списках, когда кликаю по другому пункту, и происходит ерунда .mobile-submenu-active начинает то добавляться то появляться наоборот, когда свернул список, я так понимаю это из за Toggle и моих кривых руках.
Как сделать что бы класс .mobile-submenu-active появлялся всегда у элемента на который кликнули, и удалялся у всех остальных?
Вот как делаю.

$(".toper_mobile .menu > li.dropdown > a").on("touchstart click", function (e) {
        e.preventDefault();
        if(!1 === $(this).next().is(":visible")){
         $(this).parent().siblings().find(".dropdown-menu").slideUp(300),
         $(this).parent().siblings().find(".dropdown a").removeClass("mobile-submenu-active")
        }
      $(this).next().slideToggle(300);
      $(this).toggleClass("mobile-submenu-active");
    });

А вот живой пример:
https://codepen.io/Cheizer/pen/LYPGbXZ

Подскажите пожалуйста как правильно написать?

Answer 1

[Антон]

Так я не понял, что вас не устраивало, ибо все работало, но судя по отрывкам "слов", что мне удалось понять, сделал

так

var selector = $(".toper_mobile .menu > li.dropdown > a");  
selector.on("touchstart click", function (e) {
        e.preventDefault();
        if(!1 === $(this).next().is(":visible")){
         $(this).parent().siblings().find(".dropdown-menu").slideUp(300),
         $(selector).removeClass("mobile-submenu-active")
        }
      $(this).next().slideToggle(300);
      $(this).addClass("mobile-submenu-active");
    });

Comments

[Cheizer]

Благодарю! Единственно у вас не удаляется класс если свернуть активный пункт.

Answer 2

[Alams Stoyne]

Моё решение было бы таковым:

$(".dropdown > a").on("touchstart click", function (e) {
        e.preventDefault();
        if($(this).hasClass('mobile-submenu-active')){
            $(this).removeClass("mobile-submenu-active"); 
            $(this).next('.dropdown-menu').slideToggle(300);       
        }else{
            $(this).closest('.menu').find(".dropdown-menu").slideUp(300);  
            $(this).closest('.menu').find(".dropdown a").removeClass("mobile-submenu-active");
            $(this).addClass("mobile-submenu-active");  
            $(this).closest('.dropdown').find(".dropdown-menu").slideDown(300);   
        }

Comments

[Cheizer]

Благодарю!

Answer 3

[Rsa97]

$('.toper_mobile .menu > li.dropdown > a').on('touchstart click', function() {
  $('.mobile-submenu-active').removeClass('mobile-submenu-active');
  $(this).addClass('mobile-submenu-active');
});

Comments

[Cheizer]

Благодарю!