Question

我正在使用jQuery和弹跳jQuery UI效果制作滑动菜单。问题是当我将鼠标悬停在第一个li元素上时，悬停事件甚至不会激活一次。这是我的JavaScript代码：

$(document).ready(function(){
    $("#topbar > ul > li:has(ul) > ul").hide().each(function(){
        var parent = $(this).parent();
        var height = parent.outerHeight();
        $(this).css({
            position: "absolute",
            top: height,
            zIndex: 1000
        });
    });
    $("#topbar > ul > li:has(ul)").hover(function(){
        $("ul", this).slideDown(500, "easeOutBounce");
    }, function(){
        $("ul", this).slideUp(500, "easeOutBounce");
    });
});

这是我的HTML代码：

<nav id="topbar">
    <ul>
        <li><a href=""><i class="fa fa-plus"></i>  New</a><ul><li>T</li><li>R</li></ul></li
        ><li><a href="">View</a></li>
    </ul>
</nav>

我总是使用jQuery的CDN（http://code.jquery.com/jquery.min.js）提供的jQuery的最新版本，我正在使用jQuery UI的1.11.4版本。

修改：我还尝试了以下方法，而不是.hover方法：

$("#topbar > ul > li:has(ul)").on("mouseover mouseout", function(){
    $("ul", this).slideToggle(500, "easeOutBounce");
});

编辑： JSFiddle Here（旧JSFiddle错了。）

Answer 1

您唯一真正的问题似乎是您尝试展示的UL背景是透明的。

在元素中添加如下所示的类：

<ul class="drop"><li>T</li><li>R</li></ul>

然后添加以下CSS规则：

.drop{
    background-color:#ccc;
}

由于A.Wolf指出将代码更改为以下代码会更好地提高性能并使整个效果更加安抚。

$(this).find("ul").stop().slideToggle(500, "easeOutBounce");

试试这个jsFiddle您将看到ul在悬停时显示并隐藏，并且动画现在更清晰。

如何使用带有持续时间和缓和的slideToggle（）？

1 个答案: