多次滑落，點擊揭示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');每當你打開

編輯clcik你這樣的代碼：

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