クリックすると複数のスライドが表示されます

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

あなたは、このようなコードが

オープン、編集上のあなたがclcik jQuery(this).next('.gameData').slideDown('fast');毎回をトリガしているので、これが起こっているあります：

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