Question

我有div（.details）我想要隐藏，直到点击（.aro）。如果任何其他div（.details）可见，则需要在显示单击之前关闭它们。希望有道理。现在，我的代码工作正常。我唯一的问题是，如果你点击已经显示div“详细信息”的div类“aro”，它会向上滑动然后再向下滑动。不好！谁能帮我这个？我真正想要的是：1。当点击“aro”时，显示包含的“细节”，同时隐藏所有其他“细节”。 2.如果您单击已显示“详细信息”的“aro”，则不会关闭任何内容。不确定这是否需要和if / else语句或什么。如果有人可以提供帮助，我会非常感激。如果你能提供帮助，你会解释你的答案吗？即使有点。谢谢！

HTML代码：

<div class="aro">
  <h2>One</h2>
  <div class="details">
    <p>I'm visible!</p>
  </div>
</div>
<div class="aro">
  <h2>Two</h2>
  <div class="details">
    <p>I'm visible!</p>
  </div>
</div>
<div class="aro">
  <h2>Three</h2>
  <div class="details">
    <p>I'm visible!</p>
  </div>
</div>

jQuery代码：

$(".aro").click(function () {
  $(".aro").removeClass("active");
  $(this).addClass("active");
  $(".aro .details").slideUp("slow");
  $(this).children(".details").slideDown("slow");
});

JSFiddle：http://jsfiddle.net/2KpGc/1/

Answer 1

您只需要检查div是否已经具有“活动”类。

$(".aro").click(function () {
  if (!$(this).hasClass("active")) { // If clicked div doesn't have class "active"
    $(".active .details").slideUp("slow"); // Moved for smoother slide animations
    $(".aro").removeClass("active");
    $(this).addClass("active");
    //$(".aro .details").slideUp("slow");
    $(this).children(".details").slideDown("slow");
  }
});

应该有用。

jQuery slideUp，slideDown，addClass，＆amp; removeClass与具有相同类的多个元素一起发布

1 个答案: