Отключить / отменить привязку клика по активным элементам, перепривязать клик, когда не активен

Question

У меня есть левая навигация, которая показывает / скрывает контент справа.В настоящее время, когда вы нажимаете на ссылку, она исчезает в соответствующем контенте справа и добавляет к ней активный класс.Моя проблема в том, что если вы снова нажмете активную ссылку, содержимое справа снова исчезнет.Я хотел бы отменить привязку этого клика, пока ссылка активна, и, если вы нажмете другую навигационную ссылку (впоследствии удалив класс из предыдущей ссылки и добавив его к текущей), перепривязать событие клика ко всем неактивным ссылкам.

Вот мой текущий код:

    $('.mixesSidebar ul li').click( function() {
           //Get the attribute id
           var liId = $(this).attr('id');
           //removeClass active from all li's, addClass active to this
         $('.mixesSidebar ul li').removeClass('active');
         $(this).addClass('active');
           //Hide all content on the right
         $('.mixesContent ul').hide();
           //Find the content with the same class as the clicked li's ID, and fadeIn
         $('.mixesContent').find('.' + liId).fadeIn('slow');
});

Большое спасибо за вашу помощь!

Answer 1

Окружите логику с помощью:

if (!$(this).hasClass('active')) {
  ...
}

Гораздо стабильнее, чем открепление и повторное связывание.

Answer 2

Что если вы проверили, если $( this ) уже был активен, а если нет, переходите к коду.

Итак, в начале функции перейдите:

if( ! $( this ).hasClass( 'active' ) )
{
  // do stuff
}

Answer 3

Если я правильно понимаю, я бы просто добавил «активный» или что-то класс в div, который был добавлен, и затем проверил бы, есть ли у него этот класс уже или нет, и если это так, не исчезать

Редактировать Потому что мое описание ясно как грязь:

$('.mixesContent').find('.' + liId).addClass("active_list");

if (! $('.mixesContent').find('.' + liId).hasClass("active_list"){
  //do the fade
}