Question

我有一个主导航按钮，稍微向下移动悬停，然后再向后悬停。单击此按钮会释放包含大量html的下拉式div，再次单击，显然该框会重新启动。然而，其他按钮在页面上有下拉菜单，并且它们需要彼此脱离，因此每个按钮也会关闭所有其他下拉框。现在我正在使用切换来执行此操作，如果您使用另一个按钮关闭该框，则必须单击两次以在主按钮上再次显示下拉列表。

切换是有效的，但是使用if语句切换样式jquery动画的有效方法是什么？所以如果动画下来就像点击一样，动画其他动画下来。我基本上不知道如何在if部分内写。我已经看过像if（：animated）这样的例子，但那可以告诉我是否有任何一般的动画。我有很多实例我想应用这个，所以我需要具体如：

if(:animation).top = 150{ (div).animate(top = 0)} else {(div).animate(top = 150)}

另外，当你翻转并且顶部按钮向下移动一点时，我如何在下拉列表停止时将其保持下来状态，并在下拉列表重新启动时重新启动？

这是一个jsfiddle所以你可以看到我说的更容易。它不完美，但我的主页看起来很相似，让我知道如果我在任何部分混淆，我会编辑它！

http://jsfiddle.net/9DN52/1/

Answer 1

在我看来，你的代码足够高效，所以你需要做的只是添加一个类来查看它是否被点击而不是停止悬停的动作。

jQuery的：

$("#down").hover(
    function() {
        $(this).stop().animate({top:0},200);
    },
    function() {
        // this will alert the situation for you to understand
        alert($(this).hasClass("isDown"));
        // if its clicked than do not move!
        if ($(this).hasClass("isDown") == false) {
            $(this).stop().animate({top:-5},220);
        }
    }
);

$("#down").click(
    function() {
        $("#DropUp").stop().animate({bottom:-250},220);
        // Add a class to see if its clicked
        $(this).toggleClass("isDown");
    }
);

围绕你的小提琴工作：http://jsfiddle.net/9DN52/14/

修改

我还解决了一些错误，修改了一些代码，添加了描述，我认为你真正想做的是：

jQuery的：

// Actually you can do this with css transition // Remove these descriptions for a cleaner looking code $("#down").hover( function() { $(this).stop().animate({top:0},200); }, function() { // if its clicked than do not move! if ($(this).hasClass("isDown") == false) { $(this).stop().animate({top:-5},220); } } ); // Instead of toggle simple click action is enough $("#down").click( function() { // Thanks to class selector now we know // if its clicked or down, so we know what to do.. if ($("#down").hasClass("isDown") == false) { $("#DropDown").stop().animate({top:0},250); // if footer is up already this will hide it $("#DropUp").stop().animate({bottom:-250},220); $("#up").removeClass("isUp"); } else { $("#DropDown").stop().animate({top:-250},220); } // Each click should change the down situation $("#down").toggleClass("isDown"); }); // Instead of toggle simple click action is enough $("#up").click( function() { // If its up already if ($(this).hasClass("isUp") == false) { $("#DropUp").stop().animate({bottom:0},250); // if header is down already this will hide it $("#DropDown").stop().animate({top:-250},220); $("#down").stop().animate({top:-5},220).removeClass("isDown"); } else { $("#DropUp").stop().animate({bottom:-250},220); } // Each click should change the up situation $("#up").toggleClass("isUp"); });

小提琴：http://jsfiddle.net/9DN52/43/

更高级的jquery切换脚本

1 个答案: