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。

＆＃13;

$(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();
  });
});

＆＃13;

.office {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 2

解决方案：

你的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>
<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;
  });

点击一个元素，滑动div的切换

3 个答案: