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。

如果只给它一个，我认为它会触发两个事件。

而不是hover()，请使用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");
   } 
});

Answer 2

尝试将鼠标悬停在

上

  #zone-bar li

而不是em

更新，是的，您需要修改脚本：

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

}）;

然而，使用mouseenter的建议可能更好，似乎这会导致瞬间闪烁。

您可能想要考虑使用纯CSS执行此操作，没有明显的理由使用jquery来创建此效果。

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

放下问题

2 个答案: