Question

我有多个具有相同类和隐藏div的对象。单击每个span对象时，我想在其旁边显示div并关闭任何其他打开的div。

虽然我能够实现这一目标，但是有一个问题，一旦它被打开，我就无法关闭同一个div对象。它只是再次跳起来。我试过切换，但它不起作用。

＆＃13;

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

＆＃13;

.gameData {
  display: none;
  height: 50px;
  width: 100px;
  background: grey;
}

＆＃13;

<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>

＆＃13;

这是一个工作小提琴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');

像这样编辑你的代码：

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

多个向下滑动单击显示div

2 个答案: