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

发布于 2024-10-17 04:40:26 字数 1315 浏览 1 评论 0原文

我正在尝试使用 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"});
  });
}();

这确实很棒，直到有人说我们需要在下拉菜单中放置一个文本框，当然，文本框会导致鼠标在 $( “ #menu li > ul ”），所以现在我必须放置另一个嵌套的计时器层，我对自己说：必须有更好的方法来做到这一点！

所以我希望有人能告诉我...

原文

I'm trying to use jQuery's hover to do drop down menues. So the first thing I try is:

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

and this works great... in Firefox. Unfortunately in the version of Chrome I'm running (9.0.597.94) if you mouse over that drop down menu it fires the mouse out on $("#menu li#).

So ok, we have a race condition, all I need to do is add some timers...

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

Which works real great, until someone says we need to put a textbox in that dropdown menu; and of course a text box causes the mouse out to fire on $(" #menu li > ul "), so now I've got to put another nested layer of timers and I'm thinking to myself: There has got to be a better way to do this!

So I was hoping someone could clue me in...

分享到QQ

分享到微博