javascript - 下拉问题

Question

我正在尝试创建一个下拉列表。我使用以下代码使其工作但不完全:

$(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");
       } 
   });
});

我设法使其工作，因此悬停时会出现下拉列表，但是当您从下拉列表中选择一项时，下拉列表将关闭。我该如何解决这个问题？

如果我将其放在 onclick 上，它就可以工作，但随后您必须单击箭头才能再次关闭它。您可以在http://doctorwhohd.com查看实例。 (当前使用onclick)

Answer 1

它的行为很可能是这样的，因为 hover() 旨在采用 2 个函数。一种用于 mouseenter，另一种用于 mouseleave。

当你只给它一个时，我认为它会为这两个事件触发一个。

使用mouseenter()，而不是hover()。

$("#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");
   } 
});