OKADA LABO

if文でよく使う命令文。返り値trueとfalseで条件分岐

if文でよく使う命令文。
以下の記述は基本だし、よく使うので覚えておこう。

 

流れだけでいうとこんな感じ・・・↓

 

条件分岐、ifの(返り値)にtrueとfalseを与え、
trueならば命令Aを実行。
falseならば命令Bを実行。

 

これをonクリックイベントと組み合わせると、
クリックしたら、クラスを追加したり、それをanimateさせたりと
いろい便利。
以下は
ヘッダーのハンバーガーメニューボタンの動きの場合の例。
ハンバーガーをクリックすると、メニューが現れる、的なやつ。

 

たとえば
.hamburger-btnのボタンがあるとして・・・
.header_nav_dropdownのメニューがあるとして(display:hiddenしてある)

 

<script>
$(document).ready(function(){
  var flag = false; //あらかじめfalseをわたしておく

  $(".hamburger-btn”).on("click",function(){

      if (!flag) { //条件、flagがtrueでなければ・・・つまりfalseならば

      // メニューを表示させる
        $(".header_nav_dropdown").fadeIn(function() {
            flag = true; //fadeInを実行したら、flagにtrueをわたしておく。すると、次、ボタン押すとtrueの場合の処理となる
        });
      } else { //その他場合、つまりtrueならば

      // メニューを非表示にする
        $(".header_nav_dropdown").fadeOut(function() {
            flag = false; //fadeOutを実行したら、flagにfalseをわたしておく。すると、次、ボタン押すとfalseの場合の処理となる
        });
      }

  });
});

</script>

スマホ対応で、メニュー表示の時、スクロールできないようにした時とか、重宝する。

<script>
$(document).ready(function(){

var flag = false;

$(“.sp_hamburger-btn").on("click",function(){

if (!flag) {

// スクロール禁止の命令
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});

// メニューを表示
$(".sp_header_nav_dropdown").fadeIn(function() {
flag = true;
});
} else {

// スクロール禁止の命令解除
$(window).off('.noScroll');

// メニューを非表示
$(".sp_header_nav_dropdown").fadeOut(function() {
flag = false;
});
}

});
});

</script>