slideToggle()は、toggle()を
スライドアニメーションにしたものです。
セレクターで指定した要素が指定されている場合は非表示に、
非表示のときは表示状態に切り替えます。
$( セレクター ).slideToggle( スピード, コールバック関数 );
実行結果はこちらです。
水色の箇所をクリックすると、アコーディオンのように表示・非表示を切り替えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:white; font-weight:100; margin:0 auto;} dl{ width:200px; margin:20px; } dl dt{ background-color:aqua; cursor:pointer; } dl dd{ border:1px solid yellow; } </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <dl> <dt>slideDown/SlideUp動作確認</dt> <dd>アニメーションで表示を切り替える</dd> </dl> <script> $(function(){ $("dt").click(function(){ $("dd:not(:animated)").slideToggle("fast"); }); }); </script> </body> </html> |
前回のコードと比べるとすっきりしました。