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

Question

这个问题已经问了很多版本，但我似乎找不到解决方案。

我希望一次只显示一个 div 并在正确的触发器上切换 'open' class。

这是我目前的情况：

<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，但我希望有一些逻辑可以使任何其他 'description' 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 并隐藏具有相同 class 的其他 div

Display next div only and hide other divs with same class

jquery

toggle

hide

DEMO