最初は見せたくないのよ
スマホサイトでは結構見かけるのがスライドアップで要素を出す手法
これもJSでサクサクとやっています。
今回の内容
- ・スライドで要素の表示・非表示を切り替える
スライドで要素の表示・非表示を切り替える
IDとクラスを使用して関連付かせるのもアリですが
今回はそれと、関連付けしない方法の2種類を実装してみます。
idとクラスで関連付かせる方法
- ・リストその1
- ・リストその2
- ・リストその3
$('#openElem1').bind('click',function() { var thisId = $(this).attr('id'); if($('.'+thisId).hasClass('open') > 0) { $('.'+thisId).slideUp("",function() { $('.'+thisId).removeClass('open'); }); } else { $('.'+thisId).slideDown("",function() { $('.'+thisId).addClass('open'); }); } });
クリックイベントで実行させた後、まず、【オープンさせる所に、openってクラスが存在しているかどうか】
の分岐が入ります。
openがある場合は、スライドダウン(開く)処理を
openがない場合は、スライドアップ(閉じる)処理を
それぞれ実行しています。
また、各自コールバック内でopenクラスを追加または削除しています。
slideToggleがあるんですけどwww
そう、slideUp slideDownを自動で判別してくれる、slideToggleもあるんですが
こいつ結構バカなんで嫌いなんです。
下の例、連打してみてください。
- ・リストその1
- ・リストその2
- ・リストその3
$('#openElem2').bind('click',function() { var thisId = $(this).attr('id'); $('.'+thisId).slideToggle(); });
だっさ
連打した分動いていますね。
じ、じゃぁstopさせたらええやんか!!
では早速stop入れてみますね。
また連打してみてください。
- ・リストその1
- ・リストその2
- ・リストその3
$('#openElem3').bind('click',function() { var thisId = $(this).attr('id'); $('.'+thisId).stop().slideToggle(); });
だっさ
ふにゃふにゃしてるw
個人差があるかもしれないんですが、こんな動きしたりとかもそうですし
細かく設定したい時とかあるので(スライドダウンしたら画像変えるとか。)
僕は使いません。自動判別してくれるのは便利なんですけどね。