Question

我有三个独立的＆＃34; #box＆＃34; .slideToggle独立于每个人的特定.click＆＃34;＃switch＆＃34;。我想添加一个＆＃34; #masterSwitch＆＃34;控制所有三个＆＃34; #box＆＃34;同时使用.slideOpen或.slideClose。诀窍是获得所有三个＆＃34; #box＆＃34;无论当前状态如何，都可以同时关闭或打开。（一个可能是开放的，一个可能是关闭的，所以.slideToggle不会提供正确的解决方案）。所以我想创建一个真或假的陈述来告诉＆＃34; #masterSwitch＆＃34;该怎么办。有没有正确的书面建议？

// Master Box Control
$('#masterSwitch').click(function(){
    if ($('#box01').is(":visible")) {
        $('#masterSwitch').is(true);
    } else {
        .is(false);
    });

    if ($('#box02').is(":visible")) {
        $('#masterSwitch').is(true);
    } else {
        .is(false);
    });

    if ($('#box03').is(":visible")) {
        $('#masterSwitch').is(true);
    } else {
        .is(false);
    });

    if ($('#masterSwitch').is(true)) {
        $('#box01', '#box02', '#box03').slideOpen(function()
    });

    if ($('#masterSwitch').is(false)) {
        $('#box01', '#box02', '#box03').slideClose(function()
        });
    });

    // Seperate Box Controls
    $('#box01Switch').click(function() {
        $('#box01').slideToggle();
    });

    $('#box02Switch').click(function() {
        $('#box02').slideToggle();
    });

    $('#box03Switch').click(function() {
        $('#box03').slideToggle();
    });

先谢谢，请原谅我糟糕的语法。

Answer 1

直截了当地，你可以测试盒子的瞬时状态，然后相应地slideUp / slideDown：

$('#masterSwitch').click(function() {
    var $boxes = $('#box01', '#box02', '#box03');
    var isVisible = $boxes.filter(':visible').length > 0; 
    $boxes[isVisible ? 'slideUp' : 'slideDown']();
});

但是，单击masterSwitch时，一个或多个框可能正在进行动画处理。如果是这样，新的slideUp / slideDown命令将排队，因此您可以在订购新动画之前选择.stop()：

$('#masterSwitch').click(function() {
    var $boxes = $('#box01', '#box02', '#box03');
    var isVisible = $boxes.filter(':visible').length > 0; // `true` if one or more of the boxes is visible.
    $boxes.stop()[isVisible ? 'slideUp' : 'slideDown']();
});

除此之外，这些方框可能正朝着全部hidden前进，但还没有到达那里，在这种情况下，你可能会期望它们全部到.slideDown()。为了确保masterSwitch的操作对于最终的盒子状态是正确的，你可以......

...强制完成.stop（true）：

$('#masterSwitch').click(function() {
    var $boxes = $('#box01', '#box02', '#box03');
    var isVisible = $boxes.filter(':visible').length > 0; 
    $boxes.stop(true)[isVisible ? 'slideUp' : 'slideDown']();
});

...或等待任何正在运行的动画完成：

$('#masterSwitch').click(function() {
    var $boxes = $('#box01', '#box02', '#box03');
    $boxes.promise().then(function() {
        var isVisible = $boxes.filter(':visible').length > 0; 
        $boxes[isVisible ? 'slideUp' : 'slideDown']();
    });
});

很难预测上述哪一项会产生最佳效果。建议您尝试全部对抗masterSwitch的多次快速点击。

使用true false语句来控制点击函数

1 个答案: