javascript - 一页中的许多切换幻灯片元素

Question

我多次使用这个脚本来隐藏一些文本:

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

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

示例:

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

单击另一个按钮 (#button2) = 显示与该按钮关联的 div (#div2)，同时 #div1 关闭(滑动关闭)。

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

Answer 1

向所有按钮添加一个类.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();
});

http://jsfiddle.net/6Lhxm/