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

Question

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

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

    $('.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

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

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

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

Answer 2

Окружить логику:

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

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

Answer 3

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

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

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

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