CODEWITHSUNDEEP
javascriptjquery
cameronmarklewis
cameronmarklewis

Reputation: 264

Drop Down Problems

I am trying to create a drop down list. I have it working but not fully, using this code:

$(document).ready(function(){
   $("#zone-bar li em").hover(function() {
       var hidden = $(this).parents("li").children("ul").is(":hidden");

       $("#zone-bar>ul>li>ul").hide()        
       $("#zone-bar>ul>li>a").removeClass();

       if (hidden) {
           $(this).parents("li").children("ul").toggle()
                  .parents("li").children("a").addClass("zoneCur");
       } 
   });
});

I managed to make it work so on hover the drop down list will appear, but when you move to select one of the items from the drop down list the drop down list closes. How do I fix that?

It works if I put it to onclick but then you have to click the arrow to close it again. You can see a live example at http://doctorwhohd.com (currently using onclick)

Upvotes: 1

Views: 233

Answers (2)

unomi
unomi

Reputation: 2672

Try putting the hover on 

  #zone-bar li

and not on the em

Update, yes, you would need to modify the script: 

$("#zone-bar li").hover(function() {
   var hidden = $(this).children("ul").is(":hidden");

   $("#zone-bar>ul>li>ul").hide()        
   $("#zone-bar>ul>li>a").removeClass();

   if (hidden) {
       $(this).children("ul").toggle()
              .children("a").addClass("zoneCur");
   }

});

However, the suggestion of using mouseenter is probably superior, it seems that this causes momentary flicker.

You might want to consider doing this with pure CSS, there is no obvious reason to employ jquery to create this effect. 

#zone-bar li{ height:1em; overflow:hidden}; 
#zone-bar li:hover{ height:auto};

Upvotes: 0

user113716
user113716

Reputation: 322452

It is likely behaving this way because hover() is intended to take 2 functions. One for mouseenter and one for mouseleave.

When you give it only one, I think it fires the one for both events.

Instead of hover(), use mouseenter().

$("#zone-bar li em").mouseenter(function() {
   var hidden = $(this).parents("li").children("ul").is(":hidden");

   $("#zone-bar>ul>li>ul").hide()        
   $("#zone-bar>ul>li>a").removeClass();

   if (hidden) {
       $(this).parents("li").children("ul").toggle()
              .parents("li").children("a").addClass("zoneCur");
   } 
});

Upvotes: 1

Related Questions