一页中有许多切换滑动元素

时间:2013-01-10 01:42:55

标签: javascript jquery

我多次使用此脚本来隐藏一些文字:

$(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关闭(滑动关闭)。

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:0)

还可以在点击时隐藏所有div,然后仅显示相关的div:

的javascript:

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

HTML:

<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>

http://jsfiddle.net/x7Ehq/