jQuery:toggleとtoggleClassを正しく使いこなす

goto_jp 8,183views 更新:2014年4月9日

toggle()
指定した要素に直接スタイルの「display:none」を付与・解除を行う。

toggleClass()
指定した要素に指定したクラスの付与・解除を行う。

toggleは表示のオン・オフのみでシンプルに扱えますが、何かをスイッチにしてスタイルの変更を行うには toggleClass でクラスの付与・解除を行う方が幅広く利用できます。

JavaScript

$(".switch").click(function () {
  $("#target").toggleClass("active");
});

上記例の場合、「switch」をクリックした再にID「target」の付いた要素にクラス「active」を付与します。

クラスの有無でレイアウトを大きく変えたりすることもできるので、jQueryによる表示切り替えの基本と言えます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません