使用真實的虛假陳述來控制點擊功能

-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

使用真實的虛假陳述來控制點擊功能

回答

相關問題