How to temporary disable click event on a HTML element

Question

Hi guys,

 $(function(){
   $(".first").click(function(){ 
               $(".first ul li").slideUp();
               $(this).find("li").slideDown();        
   });
});

How can I make the active .first element temporary unclickable until its class siblings are referred as active and of course executing the code above is necessary.

Also no matter what type it is: div, li.

Appreciate your help.

Answer 1

Update

Bad case of Monday sloppy code. Thanks to Peter Ajtai for picking up on that (see comments).

 $(function(){
   $(".first").click(function(event){


               if ($(this).siblings('.active').length !== $(this).siblings().length) {
                   return false;
               }

               $(".first ul li").slideUp();
               $(this).find("li").slideDown();        
   });
});

So if all the siblings don't have an active class, then your function will bail out early.

Answer 2

By active, do you mean they have a class called active?

If so, try this:

$(function(){
    $(".first").click(function() {
        if( $( this ).siblings( ':not(.active)' ).length === 0 ) {
             $(".first ul li").slideUp();
             $(this).find("li").slideDown(); 
        }       
    });
});

When the element with the .first class is clicked, it simply gets its .siblings() that do :not() have the active class, and checks the quantity it found using the length property.

When the length is 0, they all have the active class.

Answer 3

You can use the .unbind() and then .bind() the event again. But I think the class toggling is more efficient.