Jquery 如何在鼠标悬停在父菜单上时淡入/淡出菜单子菜单

我正在尝试获得一个基本的

fadeIn

的子

ul

#访问ul li:hover>ul在悬停时，然后在悬停时

fadeOut

。我有这个代码，但它不起作用：

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500);
        }, function() {
            jQuery(this).children("ul").fadeOut(500);
    });
});

下面的代码工作起来有点像，但是有问题，因为我不仅仅影响了

这个

子项：

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500).animate({top: '-=10'}, 500, function() { });
        }, function() {
            jQuery("#access ul li > ul").fadeOut(500).animate({top: '+=10'}, 500, function() { });
    });
});

有人知道为什么顶级版本不起作用吗

以下是HTML：

<nav id="access" role="navigation">
    <div class="menu"><ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Sample Page">Sample Page</a>
            <ul class='children'>
                <li><a href="#"; title="About Me">About Me</a></li>
                <li><a href="#" title="Another Page">Another Page</a></li>
            </ul>
        </li>
    </ul></div>
</nav>

听起来很奇怪，这对我来说很好：

福

富-1
富-2
富-3



酒吧

酒吧-1
酒吧-2
酒吧-3



巴兹

Baz-1
Baz-2
Baz-3



$（函数（）{
$（'#access li'）。悬停（函数（）{
$（this.children（'ul'）.fadeIn（）；
}，函数（）{
$（this.children（'ul'）.fadeOut（）；
});
});
ul{
显示：无；
}

如果没有任何html，这只是猜测，但我相信问题在于元素在覆盖悬停事件处理程序所附加的原始元素或类似元素时褪色

也许像这样的方法会奏效：

$(function() {
     $("#access ul li").mouseenter(function() {
         $('ul', this).fadeIn(500);
     });
     $("#access ul li > ul:visible").mouseleave(function() {
         $(this).fadeOut(500);

     });
});

如果某些

#access ul li ul

元素在默认情况下是可见的，您可以尝试将mouseenter中的

此

元素存储在变量或jQuery的数据中，并在mouseleave函数中使用该元素来定位正确的元素

---

当然，最好的选择是对html和css进行结构化，使其正常工作。

包括html会有所帮助。看起来这几乎就是我所拥有的，但它对我不起作用。另外，如果有帮助，如果我将

fadeIn（）

替换为

animate（）

，animate将与

此

子项一起工作。我被难住了。嗯。。您能否创建一个JSFIDLE来复制您的问题？

$(function() {
     $("#access ul li").mouseenter(function() {
         $('ul', this).fadeIn(500);
     });
     $("#access ul li > ul:visible").mouseleave(function() {
         $(this).fadeOut(500);

     });
});