Question

我有一个简单的手风琴，它使用slideToggle，根据点击链接（触发器）显示/隐藏内容。我正在使用的代码有效，但是当你点击另一个元素时，它似乎无法正常运行（或者至少是我想要的方式）。例如，如果我单击并打开content-a，然后单击content-b，我希望content-a关闭并返回正常状态（删除活动类），依此类推。 active类仍在最后点击的元素上。它没有切换。

jQuery不强，任何帮助都会非常感激。

$('.hidden-content').hide();
$('.trigger').on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('active').siblings().removeClass('active');
  $(this).find('.arrow').toggleClass('arrow-down arrow-up').siblings().removeClass('arrow-up');
  $('.hidden-content').stop(true).slideUp(300);
  $(this).next('.hidden-content').stop(true).slideToggle(300);
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">

  <div class="trigger"><span class="arrow arrow-down"></span>trigger</div>
  <div class="hidden-content">hidden-content</div>

  <div class="trigger"><span class="arrow arrow-down"></span>trigger</div>
  <div class="hidden-content">hidden-content</div>

  <div class="trigger"><span class="arrow arrow-down"></span>trigger</div>
  <div class="hidden-content">hidden-content</div>

</div>

单击其他元素时出现SlideToggle问题？

0 个答案: