点击按钮时如何关闭其他div并切换当前div的显示状态？

没问题，我来帮你修改代码实现这个需求～你现在的代码只能切换当前按钮对应的面板，没有处理其他已展开的面板，调整一下逻辑就可以啦：

完整实现代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrapper">
  <button>OPEN ME</button>
  <div class="slider-content">Foo</div>
</div>
<div class="slider-wrapper">
  <button>OPEN ME</button>
  <div class="slider-content">Bar</div>
</div>
<div class="slider-wrapper">
  <button>OPEN ME</button>
  <div class="slider-content">Baz</div>
</div>

<script>
$(".slider-wrapper button").click(function() {
  // 获取当前按钮对应的面板
  const currentContent = $(this).parent().find(".slider-content");
  // 收起所有其他已展开的面板
  $(".slider-content").not(currentContent).slideUp();
  // 切换当前面板的显示状态
  currentContent.slideToggle();
});
</script>

代码逻辑解释 #

• 首先通过$(this).parent().find(".slider-content")定位到当前点击按钮对应的面板元素
• 用$(".slider-content").not(currentContent).slideUp()选中所有非当前的面板，调用slideUp()把它们收起来
• 最后调用slideToggle()切换当前面板的显示状态：如果是收起的就展开，已经展开的就收起

这样就能完美实现你要的效果啦——点击任意按钮时，其他展开的面板会自动关闭，同时切换当前面板的状态。

内容的提问来源于stack exchange，提问作者user9640262