0

我有这个代码

jQuery('.button').click(function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '100%'});
});

一次就可以正常工作。但我想在再次点击时恢复div2。切换会起作用，但问题是，我不想隐藏 div2 而只是通过动画降低其宽度。

这样做的正确代码是什么？

4

4 回答 4

4

在方法之外保留一个标志：

var open = false;

jQuery('.button').click(function() {
    open = !open;

    if(open) {
        jQuery('.div1').animate({width: '100%'});
        jQuery('.div2').animate({width: '100%'});
    } else {
        jQuery('.div1').animate({width: '0%'});
        jQuery('.div2').animate({width: '50%'}); // Or whatever else you want to lower it to
    }
});
于 2012-05-01T13:46:21.583 回答
2

更新的解决方案

由于.toggle在 jQuery 1.8 中已弃用并在 1.9 中删除，因此首选解决方案现在将涉及手动跟踪点击以决定做什么。切换切换的通用替代方法是：

var handlers = [
    // on first click:
    function() {
        jQuery('.div1').animate({width: 'toggle'});
        jQuery('.div2').animate({width: '50%'});
    },
    // on second click:
    function() {
        jQuery('.div1').animate({width: 'toggle'});
        jQuery('.div2').animate({width: '100%'});
    }
    // ...as many more as you want here
];

var counter = 0;
$(".button").click(function() {
    // call the appropriate function preserving this and any arguments
    handlers[counter++].apply(this, Array.prototype.slice.apply(arguments));
    // "wrap around" when all handlers have been called
    counter %= handlers.length;
});

原始答案

您可以简单地使用.toggle：

jQuery('.button').toggle(function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '50%'});
}, function() {
    jQuery('.div1').animate({width: 'toggle'});
    jQuery('.div2').animate({width: '100%'});
});

每次单击时，这将完全切换 的可见性并在 50% 和 100% 之间.div1切换宽度。.div2

如果您不想.div1在第一次隐藏后再次显示，只需执行

jQuery('.button').toggle(function() {
    jQuery('.div1').animate({width: 'hide'});
    jQuery('.div2').animate({width: '50%'});
}, function() {
    jQuery('.div2').animate({width: '100%'});
});
于 2012-05-01T13:47:29.050 回答
0

尝试改用 toggleClass 并使用 css 来处理不同的样式。

于 2012-05-01T13:47:04.983 回答
-1

使用变量并在每次点击后更新它，例如：

`
var $toggle = 0;
$('.button').click(function(){
    if($toggle == 0){
        $('.div1').animate({width: '50%'});
        $toggle = 1;
    }else{
        $('.div1').animate({width: '100%'});
        $toggle = 0;
    };

});
`
于 2016-04-06T17:39:25.900 回答