Question

我想在当前li元素下滑动所有li元素和slideDown ul元素

$(document).ready(function(){
    $("li").slideUp();
});

$(".nav").hover(function(e){
    $(this).children("li").slideDown();
    $("li").slideUp();
    e.stopPropogation();
});

this是小提琴

问题是它最终是否会向上滑动我做错了什么？

Answer 1

您需要定位除当前之外的所有其他导航的LI，因此请使用not：

e.g。

$(".nav").hover(function (e) { $(this).children("li").slideDown(); $(".nav").not(this).find("li").slideUp(); e.stopPropogation(); });

JSDFiddle： http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/

当你遇到重叠动作的问题时，通常的＆＃34;修复＆＃34;是停止先前的动画，因此它们至少不会链接并运行完成：

$(".nav").hover(function (e) { $(this).children("li").stop(true,true).slideDown(); $(".nav").not(this).find("li").stop(true,true).slideUp(); e.stopPropogation(); });

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/

Answer 2

您可以将hover()事件挂钩分为两个电话，一个用于mouseenter，另一个用于mouseleave。在mouseenter，您要slideDown()当前li中的ul。在mouseleave中，您希望将它们全部slideUp()。试试这个：

$(".nav").hover(function () {
    $(this).children("li").slideDown();
}, function() {
    $("li").slideUp();
});

Updated fiddle

Answer 3

根据您的代码$(this).children("li").slideDown();，所有li都会向下滑动。并且，$("li").slideUp();将使所有的li滑动!!

请做

$(".nav").hover(function (e) {
 $(".nav").not(this).find("li").slideUp();
 $(this).children("li").slideDown();
 e.stopPropogation();

}）;

参考jQuery not

Answer 4

我添加了一个类来修复此问题

     $(document).ready(function(){
         $("li").slideUp();
        });

         $(".nav").hover(function(e){
            $("li").removeClass();
            $(this).children("li").addClass("current").slideDown();
            $("li:not(.current)").slideUp();
            e.stopPropogation();
         });

Fiddle link

slideDown立即li并向上滑动其他li元素

4 个答案: