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

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');
     });
  });

演示

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>