jquery - 带有淡入淡出的下拉菜单不起作用？

Question

我有一个简单的下拉菜单，希望下拉菜单淡入淡出，但我使用的代码似乎不起作用。不确定我是否尝试点击错误的选择器或者代码是否错误。我要说...代码是错误的。

HTML：

<ul class="m-nav">
   <li><a href="">Rules</a></li>
   <li><a href="">Regulators</a>
      <ul class="drop">
         <li><a href="">Bobby</a></li>
         <li><a href="">David</a>
      </ul>
   <li>
</ul>

JS：

$('ul.m-nav li').addClass('booze');

    $('.booze').hover(function() {
        $('.drop').fadeIn('slow');
    }, function() {
        $('.drop').fadeOut('slow');
    });

Answer 1

看起来您在这里缺少一个结束标签：

<li><a href="">David</a>

我添加了那个标签，然后调整了你的 jQuery 以在你的<li>. 否则，脚本会将hover事件绑定到您的每个<li>s.

最后，hide()最初的下拉菜单。

它现在对我来说似乎工作正常。这是小提琴：http: //jsfiddle.net/eV9Wv/

Answer 2

您的悬停选择器覆盖了多个 LI，因此您应该只淡化子 .drop：

 $('.booze').hover(function() {
        $('.drop',this).fadeIn('slow');
    }, function() {
        $('.drop',this).fadeOut('slow');
    });

在这里测试