Forums

A beginner question in jquery.

Hi,
I m creating a dropdown menu with jquery which is working fine on two clicks however if you click on the link the third time if slides up and down itself. Can you tell me what mistake I m making and how to fix this. I dont want to add any more classes or ids in the markup. I m new to jquery so an explanation would be very helpfull.
here is the code..

Thanks jshjohnson for writing the codepen and thanks a lot JoshBlackwood , but since I m learning jquery , if you could please explain a little(in my script) WHY when you click on the link third time it slides up and down itself , would very helpfull for me to understand.

However, this still doesn’t work quite as expected — you’ll notice that the second event handler then doesn’t work at all. This is because the same item now has two event handlers on it — the second never has a chance to fire, I think. Someone more experienced might be able to explain it better.

This is where if statements within a click handler really come in handy:

$(‘.sidebar li’).click(function(){
var $this = $(this); // First, I set $(this) as a variable, so the browser only looks it up once, as we’ll be using it multiple times.
if (!$($this).hasClass(‘active’)) { // Next, I check to make sure that this does NOT (note the ‘!’) have a class of ‘active’
$($this).addClass(‘active’); // Since it doesn’t, let’s give it that class
$(‘.active ul’).slideDown(700); // Now that it has the class, we can target that to slide the ul down
} else { // If it DOES have the active class
$(‘.active ul’).slideUp(700); // We slide it up
$($this).removeClass(‘active’); // And remove the class
}
});

Read the comments for an explanation of each line. The way this is set up, once the click handler is fired, the first thing it does is check if the item clicked is active. As long as it’s not, it shows the ul, then sets the clicked item as active. If it’s already active, it hides the ul and resets the active class.

Here’s an even more optimized version, which will prevent multiple items from having an active class, and only show one ul expanded at a time:

$(‘.sidebar li’).click(function(){
var $this = $(this);
if (!$($this).hasClass(‘active’)) {
$($this).addClass(‘active’);
$(‘.active ul’).slideDown(700);
if ($($this).siblings(‘.active’)) { // New stuff! This checks to see if this item has any siblings that are active
$(‘.active’).not($this).children(‘ul’).slideUp(700); // Then hides any child ul that isn’t a direct child of this item
$(‘.active’).not($this).removeClass(‘active’); // And removes the active class on that (now hidden) element
}
} else {
$(‘.active ul’).slideUp(700);
$($this).removeClass(‘active’);
}
});

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.