javascript - 使用 jQuery 切换 sibling 不起作用

Question

我是 jQuery 的新手，我正在尝试切换同级 div。基本上我有一个 div 列表，每当我单击以显示下一个 div 时，前一个应该关闭。目前，当打开下一个 div 时，前一个不会关闭，无法弄清楚为什么。我必须手动打开和关闭每个 div。

抱歉新手问题! :)

非常感谢任何帮助!

function showHide(button){   
$(button).next('.showhide').toggle().siblings('.showhide').hide();
} 

html:

<div class="acc-s-container">
   <div class="acc-s-header" id="div" onclick="showHide(this)">
      <h1>Account Settings</h1>
   </div>
   <div id="divcontent" class="acc-s-content showhide">
      <p>content</p>
   </div>
</div>
<div class="acc-s-container">
   <div class="acc-s-header" id="div2" onclick="showHide(this)">
      <h1>Account Settings</h1>
   </div>
   <div id="divcontent2" class="acc-s-content showhide">
      <p>content</p>
   </div>
</div>
<div class="acc-s-container">
   <div class="acc-s-header" id="div3" onclick="showHide(this)">
      <h1>Account Settings</h1>
   </div>
   <div id="divcontent3" class="acc-s-content showhide">
      <p>content</p>
   </div>
</div>

CSS

 .acc-s-content{display:none;}

Answer 1

你有错误的选择器来定位元素 .showhide 从兄弟 .acc-s-container div 的点击 div parent.use:

function showHide(button){  
 $(button).next('.showhide').toggle().parent().siblings().find('.showhide').hide();
} 

Working Demo