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

我正在尝试使用jquery对div进行手风琴式的打开/关闭。但是由于某种原因，jquery中的下一个似乎不起作用。我想当一个标题被点击时，所有其他的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>

演示-

---

非常感谢您的帮助。

正如其他人所说，标题旁边没有$.next'div'，因此我将.office移入，以便该元素现在与之相邻。使用原始HTML进行更新

$function{ 变量$titles=$'。办公室标题'， $offices=$'.office'； $titles.“单击”功能{ var$target=$this.parent'.office行'.next'.office'； $target.slideToggle； $offices.not$target.slideUp； }; }; .办公室{ 显示：无； } 标题 萨达斯 标题 萨达斯 标题 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>
<div class="office-row">
  <h3 class="office-title">Title</h3>
  <div class="office">sadasd</div>
</div>

演示：

---

我们可以使用jquery循环元素并显示它们none，然后使用切换函数。这是用于查询的工作代码

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

---

在这里包括完整的代码。请看h3元素没有兄弟元素，因此next在next之前没有找到我添加的父元素。现在它向下滑动，但再次向上滑动，因为我希望关闭所有其他分区。我可能需要更改html？已修复-非常感谢。是否可以在不改变html结构的情况下实现这一点。“我做了，但它并不完美。”PrithvirajMitra肯定这是可能的，但你为什么要这么做？它只会稍微改变JS，但没有什么大的改变。如果您现在无法实现，我怀疑使用原始HTML是否会改变任何事情。@PrithvirajMitra使用您的原始HTML更新了代码。在我的原始HTML结构中，accordian头以span开头，我不能将div放在span.Brilliant中。非常感谢你的帮助。