[jQuery] Clickable dropdown lists
Hi everyone!
I'm trying to work out a drop down list and can't seem to figure this
thing out. So, here's my code:
var menuclicked = 0;
$('#dropDown1').click( function() {
if( menuclicked == 1) {
menuclicked = 0;
$(this).find('ul').css('visibility', 'hidden');
}else{
$(this).find('ul').css('visibility', 'visible');
menuclicked = 1;}
});
and my html
<ul id="dropDown1" class="dropDown">
<li><a href="#" class="selectLink">Select from the list</a>
<ul id="dropDown1sub">
<li><a href="">Leukemia</a></li>
<li><a href="">Breast Cancer</a></li>
<li><a href="">Lung Cancer</a></li>
<li><a href="">Colon Cancer</a></li>
<li><a href="">Prostate Cancer</a></li>
<li class="lastList"><a href="">View more Topics</a></
li>
</ul>
</li>
</ul>
This works fine, but I need two things to occur. First, hide the
nested ul if the user clicks on the document while it's open. Second,
behave like multiple lists on a page wherein it closes if another list
is accessed.
Can I get a little help?