Megadropdown problem when adding .click to a li dynamically
Newbie problem here.
I'm looping through a set of li's looking for li's with the class "drop" and adding click events to them dynamically. When a user clicks the li's I show a div class"megadropdown" that is placed inside the li (yes I know, not valid html). But since I have placed the content I want to drop down inside the li's the click event seem to attach itself to the links inside the megadropdown as well.
The reason I placed the megadropdown div inside the li was the eleganse of the code, allowing me to use (this) to reference everyhing, but I would love to get some input on better way to do this. I also use return false on the li to prevent the user from going to the url (to let it degrade nicely for those crazy lynx users :)
Test it on the white top nav here: http://alpha.nrkp3.no/ide/ (click on Programmer, Spillelister, etc).
HTML
<ul class="menu-left">
<li class="drop"><a href="http://alpha.nrkp3.no/ide/spillelister/">Spillelister</a>
<br/>
<div class="megadropdown">
<a href="http://jquery.com">link</a>
<a href="http://jquery.com">link</a>
</div>
</li>
<li class="drop"><a href="http://alpha.nrkp3.no/ide/something/">Something else</a>
<br/>
<div class="megadropdown">
<a href="http://jquery.com">link</a>
<a href="http://jquery.com">link</a>
</div>
</li>
</ul>
jQuery:
jQuery(document).ready(function() {
jQuery('ul.menu-left li.drop').each(function(index) {
jQuery(this).click(function (e) {
//Looks for menu elements that are already highlighted and fades out megadropdown
jQuery('ul.menu-left li.highlight div.megadropdown').fadeOut("fast"), jQuery('ul.menu-left li.highlight').removeClass('highlight');
//adds back the highlight to the clicked li
jQuery(this).toggleClass("highlight");
jQuery(".megadropdown", this).fadeIn("fast");
return false;
});
});
});
I tried adding the drop class to the a hrefs inside the li instead (<li><a href="http://alpha.nrkp3.no/ide/spillelister/" class="drop">Spillelister</a></li>) but then nothing happened.