Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード

jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法

セイト

その3.「toggleClass」を使ってスイッチのオン・オフを切り替える

上記の2つだけでも結構使えますが、それに加えてメニューボタンのオン・オフ状態で見た目を変えたい場合もあるかと思います。
そんなときは「toggleClass」を使って装飾しましょう。
デモはこちら

これ、「.addClass()」や「.removeClass()」はいらないんです。
必要な記述は、わずか1行

JS

<script>
$(function(){
$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");//追加部分
});
});
</script>

HTML

さっきと同じです。

CSS

#acMenu dt{
display:block;
width:185px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
cursor:pointer;
background:url(images/i_swich.png) 177px -69px no-repeat;
padding-right:15px;
}
#acMenu dd{
background:#f2f2f2;
width:200px;
height:50px;
line-height:50px;
text-align:center;
border:#666 1px solid;
display:none;
}
#acMenu dt.active{
background:url(images/i_swich.png) 177px 18px no-repeat;
}

これまたシンプル。
使う際には、「.toggleClass(“active”)」のように、付けたいクラスを()内に入れてみてください。
また、タブメニューでもこれと同じことをしたい場合には、下記のように2行追加することで実装できます!

<script>
$(function(){
$("#tabMenu li a").on("click", function() {
$("#tabBoxes div").hide();
$($(this).attr("href")).fadeToggle();
$("#tabMenu li a").removeClass("active");//追加部分
$(this).toggleClass("active");//追加部分
});
return false;
});
</script>

まとめ

いかがだったでしょうか。
toggleさんを使うことでだいぶコードが短縮されたと思います。
ご意見・ご質問などあればぜひよろしくお願いいたします!

ちなみに辞書サイトのweblioさんによれば、toggleとは「ボタン」とか、「同一の操作で二つの状態を交互に切り換えること」を意味するのだそう。なるほど。


LIGでは、エンジニアを絶賛募集中!
採用に応募する

3 0 0 0