Question

我正在尝试使用jQuery的hover做下拉菜单。所以我尝试的第一件事就是：

<ul id="menu">
  <li>
    <ul>
      ...
    </ul>
  </li>
  ...
</ul>

$(" #menu ul ").css({display: "none", visibility: "hidden"});
$(" #menu li ").hover(function() {
    $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast');
  },
  function() {
    $(this).find('ul:first').css({visibility:"hidden", display:"none"});
  });

这在Firefox中很有用......不幸的是，在我运行的Chrome版本（9.0.597.94）中，如果您将鼠标悬停在该下拉菜单上，则会在$（“＃menu li＃）上触发鼠标。

好吧，我们有竞争条件，我需要做的就是添加一些计时器......

(function(){
var timer;
$(" #menu li ").hover(function() {
    $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast');
  },
  function() {
    var header = $(this);
    timer = setTimeout(function() {
        header.find('ul:first').css({visibility:"hidden", display:"none"});
      }, 100);
  });
$(" #menu li > ul ").hover(function() {
    clearTimeout(timer);
  },
  function() {
    $(this).css({visibility:"hidden", display:"none"});
  });
}();

哪个有效，直到有人说we need to put a textbox in that dropdown menu;当然一个文本框导致鼠标在$（“＃menu li＆gt; ul”）上触发，所以现在我必须放置另一个嵌套的计时器层，我在想：那里必须是一个更好的方法来做到这一点！

所以我希望有人能在...中提示我。

Answer 1

无论如何......我想你可以看看这里：38 jQuery and CSS Drop Down Multi Level Menu Solutions。

Answer 2

是否有理由不能使用Suckerfish（或被认为是Superfish）？看起来这是一个不需要重新发明的轮子......

有没有更好的方法在jQuery中下拉菜单？

2 个答案: