單擊時多個幻燈片顯示div

Question

我有多個具有相同類和隱藏div的對象。 在單擊每個跨度對象時，我要顯示其旁邊的div並關閉任何其他打開的div。

雖然我能夠做到這一點，但是有一個問題，一旦打開同一個div對象，便無法關閉它。 它只是再次跳來跳去。 我嘗試了撥動開關，但沒有用。

 jQuery(function() { jQuery('.open').on('click', function() { jQuery('.gameData').slideUp('fast'); jQuery(this).next('.gameData').slideDown('fast'); }); }); 

 .gameData { display: none; height: 50px; width: 100px; background: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="open">open1</span> <div class="gameData">this is content1</div> <br> <span class="open">open2</span> <div class="gameData">this is content2</div> <br> <span class="open">open3</span> <div class="gameData">this is content3</div> <br> 

這是一個工作的小提琴https://jsfiddle.net/teva/0sm2zk4q/2/

謝謝

Answer 1

您可以slideUp除當前對話框外的所有對話框（使用not()函數），然后slideToggle當前對話框。

請參見下面的演示：

 jQuery(function() { jQuery('.open').on('click', function() { jQuery('.gameData').not(jQuery(this).next('.gameData')).slideUp('fast'); jQuery(this).next('.gameData').slideToggle('fast'); }); }); 

 .gameData { display: none; height: 50px; width: 100px; background: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="open">open1</span> <div class="gameData">this is content1</div> <br> <span class="open">open2</span> <div class="gameData">this is content2</div> <br> <span class="open">open3</span> <div class="gameData">this is content3</div> <br> 

Answer 2

發生這種情況是因為您正在觸發jQuery(this).next('.gameData').slideDown('fast'); 每次您打開時

像這樣編輯代碼：

    jQuery('.open').on('click', function() {
    jQuery('.gameData').not($(this).next()).slideUp('fast');
    jQuery(this).next('.gameData').slideToggle('fast');}