web-dev-qa-db-ja.com

DIVを表示/非表示にするためのJquery

ツリー構造を表示する予定で、ツリー構造をクリックするとグリッドが表示されます。プロトタイプを表示する必要があるため、Jqueryを使用して次のことを表示することを考えています。

Application1（オンクリック）

  • <DIV>をデータとともに表示します（グリッドと同様）

アプリケーション2（オンクリック）

  • アプリケーション1を折りたたむDiv（非表示）
  • アプリケーション2DIV（表示）

など..

これをシミュレートするために使用できる利用可能な例はありますか？

javascriptjquerytoggle
12
kalls

これが実際の基本的な例です： http://jsfiddle.net/YBABG/1/

<div class="parentNode a1">Application 1
    <div class="childNode">Information</div>
</div>
<div class="parentNode a2">Application 2
    <div class="childNode">Information</div>
</div>


$(".childNode").hide();

$(".parentNode").click(function(){
   $(".childNode").hide(100);
   $(this).children().show(100);
});

非表示で期間を指定すると、単純なアニメーション効果が作成されます。

11
Kevin Bowersox

jQueryの .show() および .hide() メソッドを使用すると、目標を達成できます。

$( 'your_selector' ).click( function() {
    $( '#application_1' ).hide();
    $( '#application_2' ).show();
});
2
George Cummins

ここに

改良されたデモ

楽しくて幸せなコーディングを！

1
Roko C. Buljan

Div要素がページにすでに存在し、それらの表示を切り替えていると仮定します。

$('#Application1').click(function() {
  $('#Application1Div').show();
  $('#Application2Div').hide();
});
$('#Application2').click(function() {
  $('#Application2Div').show();
  $('#Application1Div').hide();
});
1
jbabey