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

Posted 2023-02-25

【中文标题】仅显示下一个 div 并隐藏具有相同类的其他 div

【英文标题】：Display next div only and hide other divs with same class

【发布时间】：2015-10-16 14:11:01

【问题描述】：

这个问题的许多版本已经被问过，但我似乎找不到解决方案。

我希望一次只显示一个 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>
<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，这样一次只能打开一个。

任何帮助将不胜感激！

【参考方案1】：

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

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

DEMO

【参考方案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>