Javascript 一页中有许多切换幻灯片元素

我多次使用此脚本来隐藏某些文本：

$(document).ready(function(){
  $("#button_to_click_to_toggle").click(function(){
    $("#hidden_div").slideToggle("medium");
  });
});

我想让它不可能同时切换两个隐藏的div

示例：

单击一个按钮（#button1）=显示与该按钮关联的隐藏div（#div1）

单击另一个按钮（#按钮2）=显示与该按钮关联的div（#div2），同时#div1关闭（滑动关闭）

---

单击另一个按钮（#button3）=显示与该按钮关联的div（#div3），同时#div2关闭（滑动关闭）。

向所有按钮添加类

.button

，并向所有div添加

.div

。那么这只是一个问题：

$(".button").on('click', function () {
  var id = this.id.replace('button', '');

  //properly toggle visibility of selected div
  if ($("#div" + id).is(":visible")) {
     $("#div" + id).slideUp();
  }
  else {
    $("#div" + id).slideDown();
  }
   //hide all divs except the selected one
   $(".div").not("#div" + id).slideUp();
});

---

也可以在单击时隐藏所有div，然后仅显示关联的div：

javascript:

$(document).ready(function () {
  $("button").click(function () {
    $("div").hide();
    $(this).next().show();
  });
});

html:

1
一
二
二
三
三

---

使用jQuery UI手风琴怎么样？我也尝试过这样做，但在添加slide函数时遇到了问题。我知道您现在有了一个有效的答案，但要使用上面的方法，您可以将slideDown作为slideUp函数的回调：@Wobot确保您正确使用了我的示例中的类“button”和“div”——您的HTML需要兼容。您可以使用相关的HTML/您正在使用的JS代码创建一个JSFIDLE，我会尽力帮助您。@Wobot似乎在为我工作；是否有一个特定的浏览器不工作？@Wobot我刚刚用Chrome/IE8+9测试了小提琴，它工作了。这可能是缓存问题。控制台有错误吗？让我们看看

<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>