jQeury - toggle()の状態を判定する（表示・非表示）

jQueryのtoggle()メソッドを使って、 ある要素の表示・非表示を切り替えているとします。

その時に要素が表示中なのか非表示中なのかを知りたい場合がありますよね。 例えば状態に応じてアイコンを切り替えたい時など。

そうした場合に要素の状態（表示・非表示）を判定する方法を紹介します。

注意点:
「toggle()メソッドの中」で状態を取得する場合と、 「toggle()メソッドの外」で状態を取得する場合ではロジックが異なるので両方のパターンを紹介します。

toggle()メソッド内で状態を判定する

表示状態を判定する要素を「id="box"」とします。

is()メソッドを使って次のように状態を判定できます。

$('#box').toggle(function(){
  if ($(this).is(':visible')){
    // 非表示時の処理
  } else {
    // 表示時の処理
  }
});

一見「:visible」がtrueの時に「非表示時の処理」？と思うかもしれませんが、 toggle()メソッドの中で判定しているのでこのようになります。

toggle()メソッド外で状態を判定する

toggle()メソッド外で判定する場合は、 「:visible」の場合に「表示時の処理」なのでわかりやすいですね。

if ($('#box').is(':visible')){
  // 表示時の処理
} else {
  // 非表示時の処理
}

このように、toggle()メソッドの中か外かでロジックが違ってきますので注意してください。