使用真实的虚假陈述来控制点击功能

-2

我有三个单独的“#boxes”，当每个人的“#switch”发生特定的.click时，.slideToggle会独立出来。我想添加一个“#masterSwitch”来控制所有三个“#boxes”，与.slideOpen或.slideClose相同。诀窍是让所有三个“#boxes”全部关闭或同时打开，无论其当前状态如何。（一个可能是开放的，一个可能会关闭，所以.slideToggle不会提供正确的解决方案）。所以我想创建一个真或假的陈述来告诉“#masterSwitch”该做什么。任何建议，以便正确写入？使用真实的虚假陈述来控制点击功能

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

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

来源

2016-03-18 Jamie

'var closed = false; $（'＃masterSwitch'）。click（function（）{if（closed）{$（'＃box01'，...）。slideOpen（）;} else {// close} closed =！closed;}）; ' – TCHdvlp

@TCHdvlp，这是一个问题或答案？ – trincot

给3个框输入相同的类名 –

直截了当，你可以测试盒，则效果基本show /据此了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（真）：

$('#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。

来源

2016-03-18 23:27:09

使用真实的虚假陈述来控制点击功能

回答

相关问题