Question

此问题的许多版本已被提出，但我似乎无法找到解决方案。

我希望一次只能看到一个div，并在正确的触发器上切换'open'类。

这是我到目前为止所拥有的：

<div class="wrap">
    <div class="trigger"></div>
    <div class="description">
        <p>Here's a description</p>
    </div>
</div>
<div class="wrap">
    <div class="trigger"></div>
    <div class="description">
        <p>Here's a description</p>
    </div>
</div>
<div class="wrap">
    <div class="trigger"></div>
    <div class="description">
        <p>Here's a description</p>
    </div>
</div>

和jQuery：

$(function () {
    $(".trigger").click(function (e) {
      e.preventDefault();
      $(this).next('.description').fadeToggle('fast');$(this).toggleClass('open');
    });
});

这样可以让正确的div打开和关闭，但我希望的是使任何其他'描述'div关闭的逻辑，这样一次只能打开一个。

非常感谢任何帮助！

Answer 1

尝试隐藏除当前元素的链接.description之外的所有.description，

  $(function () {
     $(".trigger").click(function (e) {
      e.preventDefault();
      $(".description").not($(this).toggleClass('open').next('.description').fadeToggle("slow")).fadeOut('fast');
     });
  });

DEMO

Answer 2

你需要隐藏像

这样的兄弟元素

$(function() {
  $(".trigger").click(function(e) {
    e.preventDefault();
    $(this).toggleClass('open').siblings('.trigger').removeClass('open');
    $(this).next('.description').stop().fadeToggle('fast').siblings('.description').stop().fadeOut('fast');
  });
});

.description {
  display: none;
}
.open {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trigger">t1</div>
<div class="description">
  <p>Here's a description</p>
</div>
<div class="trigger">t2</div>
<div class="description">
  <p>Here's a description</p>
</div>
<div class="trigger">t3</div>
<div class="description">
  <p>Here's a description</p>
</div>

仅显示下一个div并隐藏具有相同类的其他div

2 个答案:

DEMO