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>。

最后，hide()最初的下拉列表。

现在似乎对我来说很好。这是小提琴：http://jsfiddle.net/eV9Wv/

Answer 2

你的悬停选择器覆盖多一个LI，所以你应该只淡化孩子.drop：

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

Test here

使用淡入淡出的下拉菜单不起作用？

2 个答案: