I have a simple drop down menu. When you click .drop-down
, a sub menu slides down. However, if you click any of the children of .drop-down
, it slides back up again. I want only the .drop-down
that was clicked to slide the menu, none of the its descendents.
Here it is in action: http://jsfiddle.net/tmyie/uXn5k/2/
<ul>
<li class="drop-down">
<a href="#"> Main </a>
<ul class="sub-menu">
<li><a href="#">Sub</a> </li>
<li><a href="#">Sub</a> </li>
<li><a href="#">Sub</a> </li>
</ul>
</li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
</ul>
jQuery
$( ".drop-down" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
Target the a
specifically
$( ".drop-down>a" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
Or, just move the class from the li
to the a
<ul>
<li>
<a href="#" class="drop-down"> Main </a>
<ul class="sub-menu">
<li><a href="#">Sub</a> </li>
<li><a href="#">Sub</a> </li>
<li><a href="#">Sub</a> </li>
</ul></li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
<li><a href="#">Main</a> </li>
</ul>
EDIT:
By the way, you're going to run into trouble with multiple dropdowns using this script. Consider making the following changes:
$( ".drop-down>a" ).on("click", function() {
$(this).siblings('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);