最近、jqueryを乱発してます。
だってめっちゃ便利なんですもの☆
今日は、開閉式のナビゲーションに使用しました。
クリックするとパカパカ開いたり閉じたりするやつです。
まあ、いろんなやり方があるんですが、
一番手っ取り早いのがtoggleです。
$(“div p”).click(function() {
$(“ul li”).toggle(“slow”);
});
$(“ul li”).toggle(“slow”);
});
最初に、liをhide()で消しておけば、
toggleが自動的に表示・非表示を切り替えてくれます。
もう少し、こったことがやりたい場合は、
toggleClassを使います。
toggleClassはclassの追加・削除を切り替えてくれます。
今回は、開閉にプラスして、押したボタンのアイコンも
右⇒下⇒右と切り替えたかったので、これを使用しました。
$(“div p”).click(function() {
$(“div p”).toggleClass(“down”);
});
$(“div p”).toggleClass(“down”);
});
これで、pにclass=”down”がついたりつかなかったりと
クリックするごとに切り替わります。
いや~ほんと便利。
あと、関係ないけど、
css3?もかなり期待してます。
jqueryのセレクタのように、
positionがとれたり、条件式がかけたりと、
cssの便利さが格段にアップしているようなので。。。
Leave a Reply