その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とは「ボタン」とか、「同一の操作で二つの状態を交互に切り換えること」を意味するのだそう。なるほど。
- toggleの意味 – 英和辞典 Weblio辞書
LIGでは、エンジニアを絶賛募集中！
採用に応募する
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
