Question

我有这段代码

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

一次正常工作。但我想再次点击 div2 。切换会有效，但问题是，我不想隐藏div2，只是用动画降低它的宽度。

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

Answer 1

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

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
    }
});

Answer 2

更新了解决方案

由于jQuery 1.8中已弃用.toggle并在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%'});
});

每次点击，都会完全切换.div1的可见度，并将.div2的宽度切换为50％到100％。

如果您不想在首次隐藏.div1后再次显示jQuery('.button').toggle(function() { jQuery('.div1').animate({width: 'hide'}); jQuery('.div2').animate({width: '50%'}); }, function() { jQuery('.div2').animate({width: '100%'}); });，只需执行

{{1}}

Answer 3

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

Answer 4

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

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

});
`

再次单击时运行不同的功能

4 个答案:

更新了解决方案

原始答案