多次滑落，点击揭示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');}