Onclick元素，滑动div的切换

Question

我正在尝试使用jquery进行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> 

Answer 2

解：

您的div嵌套不正确，因此找不到next（'div'）。 应该是这样的：

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

演示： https ： //jsfiddle.net/v3hc19np/5/

Answer 3

我们可以使用jquery循环元素，不显示任何元素，然后使用切换功能，这是您查询的工作代码

 $('.office-title').click(function() {
    $(".office").each(function(index,obj){
        $(obj).hide();
    });
    $(e.target).parent().next().slideToggle();
    return false;
  });