javascript - onclick一个元素，div的滑动切换

Question

我正在尝试使用 jquery 以 Accordion 风格打开/关闭 div。但由于某种原因，jquery 中的 next() 似乎无法正常工作。我希望当点击一个标题时，除了被点击的那个之外，所有其他的 div 都应该被关闭。

HTML 代码 --

<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>
<div class="office">sadasd</div>
<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>
<div class="office">sadasd</div>
<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>

演示 -- https://jsfiddle.net/v3hc19np/1/

非常感谢任何帮助。

Answer 1

就像其他人所说的那样，标题附近没有$.next('div')，所以我移动了.office 以便该元素现在相邻给它。已更新为您的原始 HTML。

$(function() {
  var $titles = $('.office-title'),
      $offices = $('.office');
  $titles.on('click', function() {
    var $target = $(this).parent('.office-row').next('.office');
    $target.slideToggle();
    $offices.not($target).slideUp();
  });
});

.office {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>
<div class="office">sadasd</div>
<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>
<div class="office">sadasd</div>
<div class="office-row">
  <h3 class="office-title">Title</h3>
</div>
<div class="office">sadasd</div>