Click добавить класс active и удалить?

Question

[Денис]

Такой вопрос есть список из кнопок при клике добавляется класс active и удаляется у предыдущего, все ок работает. Вопрос: Как сделать что бы работало как есть + при нажатии на ту же кнопку что класс удалялся

<code lang="html">
    <ul id="menu-link" class="menu-link">
        <li>
            <button type="button" class="btn-clear header-link bur-dubai">Bur Dubai</button>
        </li>
        <li>
            <button type="button" class="btn-clear header-link al-barsha">Al Barsha</button>
        </li>
        <li>
            <button type="button" class="btn-clear header-link tecom">Tecom</button>
        </li>
        <li>
            <button type="button" class="btn-clear header-link al-jaddaf">Al Jaddaf</button>
        </li>
    </ul>
</code>

$("#menu-link").on("click", "button", function() {
        $("#menu-link button").removeClass('active');
        $(this).addClass('active');
    });

codepen
g1t.ru/video/chrome_HfZxkA81CH.mp4

Answer 1

[MrColdCoffee]

$("#menu-link").on("click", "button", function(){
    let is_active = false;
    
   if( $(this).hasClass('active') ){ is_active = true; }
    
   $("#menu-link button").removeClass('active');
   
 if(!is_active){  $(this).addClass('active');  }


    });

Comments

[Денис]

Спасибо крутяк

[altkov]

Зачем переусложнять? Это говнокод.

$("#menu-link").on("click", "button", function(){        
   $("#menu-link button").removeClass('active');
   $(this).addClass('active'); 
});

И всё

[MrColdCoffee]

altkov, вопрос прочитайте и поймёте

[altkov]

MrColdCoffee, тогда

$("#menu-link").on("click", "button", function(){        
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $("#menu-link button").not(this).removeClass('active');
});

[MrColdCoffee]

altkov, тогда можно и toggle использовать

[altkov]

Вообще да

$("#menu-link").on("click", "button", function(){        
    $(this).toggleClass('active');
    $("#menu-link button").not(this).removeClass('active');
});

Answer 2

[Elvis]

Есть такая штука как toggle
JQuery
JS

Comments

[Денис]

Спасибо