jquery toggleClass ボタンの開閉

with コメントはまだありません

最近、jqueryを乱発してます。

だってめっちゃ便利なんですもの☆

今日は、開閉式のナビゲーションに使用しました。
クリックするとパカパカ開いたり閉じたりするやつです。

まあ、いろんなやり方があるんですが、
一番手っ取り早いのがtoggleです。

$(“div p”).click(function() {
 $(“ul li”).toggle(“slow”);
});

最初に、liをhide()で消しておけば、
toggleが自動的に表示・非表示を切り替えてくれます。

もう少し、こったことがやりたい場合は、
toggleClassを使います。
toggleClassはclassの追加・削除を切り替えてくれます。
今回は、開閉にプラスして、押したボタンのアイコンも
右⇒下⇒右と切り替えたかったので、これを使用しました。

$(“div p”).click(function() {
 $(“div p”).toggleClass(“down”);
});

これで、pにclass=”down”がついたりつかなかったりと
クリックするごとに切り替わります。

いや~ほんと便利。

あと、関係ないけど、
css3?もかなり期待してます。

jqueryのセレクタのように、
positionがとれたり、条件式がかけたりと、
cssの便利さが格段にアップしているようなので。。。

Leave a Reply