CODEWITHSUNDEEP
jquery
PathOfNeo
PathOfNeo

Reputation: 1089

jquery prevent double tapping the same element

Hy, i'v got a horizontal css menu. When clicked on a tab i do a toggle to switch between the css selected class. This class just removes the bottom-border and colors the font, so it seems like it's an active tab. That's al fine, problem is, i would not like to toggle again when clicking on the same tab that's active.

Example:

-> click on home -> | Home | tab selected. -> click on home again -> | Home | tab deselected.

This is the on ready code: 

$('#tabmenu li').click(function(e) {

$(this).toggleClass("clicked");
    $("#tabmenu li").not(this).removeClass("clicked");      

  });

CSS:

#tabmenu li.clicked {
             /*remove a piece of UL bottom-border*/
                             border-bottom: 1px solid #fff; 
             margin-bottom: -1px;

                             /*make it show active*/
             border-top:1px solid #7C798E;
             border-left:1px solid #7C798E!important;
             border-right:1px solid #7C798E;
         }   
         #tabmenu li.clicked a { color:#000070;}

PS.

I thought of doing something like:

... //which element are you ...//temp save ....// are you the same as last one? .....// YES? -> do nothing, NO -> toggle.

Is there a more brighter way to do this? thx.

Upvotes: 0

Views: 432

Answers (1)

jAndy
jAndy

Reputation: 236012

You could add one conditional statement, checking whether the clicked li node already has the class clicked.

$('#tabmenu li').click(function(e) {
    var $self = $(this);

    if( !$self.hasClass('clicked') )
         $self.addClass("clicked").siblings().removeClass('clicked');      
});

tweaked the whole thing a little.

References: .hasClass(), .siblings()

Upvotes: 2

Related Questions