Have Geek Brain

Disable / unbind to active items, drag click when inactive

I have a left-aligned nav that shows / hides content on the right. Currently, when you click on a link, it disappears into the relevant content on the right and adds the active class to that link. My problem is that if you click on the active link again, the content on the right fades out again. I would like to cancel this click while the link is active, and if you click on another navigation link (after removing the class from the previous link and adding it to the current one), re-check the click event for all inactive links.

Here is my current code:

    $('.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 ID, and fadeIn
         $('.mixesContent').find('.' + liId).fadeIn('slow');
});

Thank you very much for your help!

+2


a source to share


3 answers


What if you checked to see if it was $( this )

already active, and if not, then go to the code.

So at the beginning of the go function:



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


a source


Combine logic with

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


Much more stable than tripping and weaving.

+1


a source


If I understand this correctly, I'll just add an "active" or something class to the div that disappeared, then check to see if that class already has it or not, and if so, don't fade.

Edit . As my description is clear as mud:

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

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


a source






More articles:


All Articles