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>