2

このスクリプトを複数回使用して、テキストを非表示にします。

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

一度に 2 つの非表示の div を切り替えられないようにしたい。

例：

1 つのボタン (#button1) をクリックすると、そのボタンに関連付けられた非表示の div (#div1) が表示されます。

別のボタン (#button2) をクリックすると、そのボタンに関連付けられた div (#div2) が表示され、同時に #div1 が閉じます (スライドして閉じる)。

別のボタン (#button3) をクリックすると、そのボタンに関連付けられた div (#div3) が表示され、同時に #div2 が閉じます (スライドして閉じる)。

4

2 に答える 2

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/

于 2013-01-10T01:54:57.500 に答える
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/

于 2013-01-10T02:03:12.563 に答える