点击多次向下滑动显示 div

Question

我有多个对象具有相同的 class 和隐藏的 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>

这是一个有效的 fiddle https://jsfiddle.net/teva/0sm2zk4q/2/

谢谢

Answer 1

发生这种情况是因为您每次点击打开时都会触发jQuery(this).next('.gameData').slideDown('fast');

像这样编辑您的代码：

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

Answer 2

您可以 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>

点击多次向下滑动显示 div

Multiple slide down on click reveal div

html

javascript

jquery

jquery-selectors