2011.07.14
トグル処理はON/OFF交互に入れ替わるような処理のことです。
jQueryの「toggle() :表示/非表示」を使用すればすごく簡単に実装できます。
例えば
#buttonの要素をクリックするたびに
#textの要素を表示/非表示させたい場合。
<p id="button">これは#buttonの内容です。</p> ←ここをクリック <p id="text">これは#textの内容です。</p> ←これを表示/非表示させたい
上記のHTMLを用意したら、
「jQuery」と「下記の内容を入力したjsファイル」を読み込むだけで完了です。
$(function(){ $("#button").click(function(){ $("#text").toggle(); }); });
たったこれだけ。
以下がサンプルです。
これは#textの内容です。
さらに「toggleClass() :クラスの追加/削除」を同時に実行すればもっと便利です。
また「toggle()」へ「fast」や「slow」を追加すれば滑らかに表示/非表示が行われます。
$(function(){ $("#button").click(function(){ $(this).toggleClass('on'); ←class="on"を追加/削除 $("#text").toggle('fast'); ←fastを追加で滑らかに表示/非表示 }); });
そのクラス追加/削除を利用しボタンの背景画像などの設定しました。
以下がサンプルです。
これは#textの内容です。
上記のように#textを初めは非表示にしたい場合は#textにCSSで「display: none」を指定してあげればOKです。
#buttonへは「cursor: pointer」を設定してあげればボタンであることが分かりやすいです。
https://dis.ne.jp/blog/topics/3837.html/trackback