单击显示 div 时多次向下滑动答案

【问题标题】：Multiple slide down on click reveal div单击显示 div 时多次向下滑动
【发布时间】：2016-12-16 09:21:33
【问题描述】：

我有多个具有相同类和隐藏 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/

谢谢

【问题讨论】：

jsfiddle.net/0sm2zk4q/3 是这样的吗？
你可以这样jsfiddle.net/anil56samal/egpwgcdx

标签： javascript jquery html jquery-selectors

【解决方案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>

【讨论】：

【解决方案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');}

【讨论】：