モバイルスクリーンメニューのコードを削除する

Question

私は、.show-navと.hide-navクラスをナビゲーションに追加/削除する次のコードを持っています。これは.toggle-navボタン付きの.mobile-nav divに適用されます。

のfunctions.php

$(function() { 

// Bind a click event to anything with the class "toggle-nav" 
$('.toggle-nav').click(function() { 
    if ($('.mobile-nav').hasClass('show-nav')) { 
     $('.mobile-nav').removeClass('show-nav').addClass('hide-nav'); 

     setTimeout(function() { 
      $('.mobile-nav').removeClass('hide-nav'); 
     }, 500); 

    } else { 
     $('.mobile-nav').removeClass('hide-nav').addClass('show-nav'); 
    } 

    return false; 
}); 

}); 

.mobile-NAVは、私が唯一の私が（> 768px）画面サイズに.toggle-NAVボタンを削除するように、モバイルデバイス上で使用するフルスクリーンオーバーレイメニューです。 .mobile-navは.toggle-navがクリックされるまで表示されません。モバイル-NAVは「開かれた」とされ、ユーザは、画面が大型になりトグルナビゲーションボタンが隠されているが、メニューが開いたままになっている場合

CSS

.toggle-nav { display: none; } 

@media screen and (max-width: 768px) { 

.toggle-nav { display: inline-block; } 
} 

問題があります。

基本的に、画面が768pxより大きくなると、.hide-navが適用されます（または.show-navが削除されます）。

Answer 1

私は、実行する必要があることの短い例を作成しました。それがあなたが望むように動作するようにいくつかのjqueryコードを追加しました。

ステップ1 - ウィンドウ幅

/* logic For window width */ 
    if ($(window).width() > 768) { 
    $('.mobile-nav').addClass('hide-nav'); 
    } else { 
    $('.mobile-nav').removeClass('hide-nav'); 
    } 

ステップ2でクラスhide-navを追加 -

のサイズを変更 ウィンドウでクラスhide-navを追加

/* logic For Window Resize */ 
    function resize() { 
    if ($(window).width() > 768) { 
     $('.mobile-nav').addClass('hide-nav'); 
    } 

    $('.mobile-nav').addClass('hide-nav'); 
    } 

    $(window).resize(resize) 
    .trigger('resize'); 

$(function() { 
 

 
    // Bind a click event to anything with the class "toggle-nav" 
 
    $('.toggle-nav').click(function() { 
 
    if ($('.mobile-nav').hasClass('show-nav')) { 
 
     $('.mobile-nav').removeClass('show-nav').addClass('hide-nav'); 
 

 
     setTimeout(function() { 
 
     $('.mobile-nav').removeClass('hide-nav'); 
 
     }, 500); 
 

 
    } else { 
 
     $('.mobile-nav').removeClass('hide-nav').addClass('show-nav'); 
 
    } 
 

 
    return false; 
 
    }); 
 

 

 
    /* logic For window width */ 
 
    if ($(window).width() > 768) { 
 
    $('.mobile-nav').addClass('hide-nav'); 
 
    $('.mobile-nav').removeClass('show-nav'); 
 
    } else { 
 
    $('.mobile-nav').removeClass('hide-nav'); 
 
    } 
 

 
    /* logic For Window Resize */ 
 
    function resize() { 
 
    if ($(window).width() > 768) { 
 
     $('.mobile-nav').addClass('hide-nav'); 
 
     $('.mobile-nav').removeClass('show-nav'); 
 
    } 
 

 
    $('.mobile-nav').addClass('hide-nav'); 
 
    } 
 

 
    $(window).resize(resize) 
 
    .trigger('resize'); 
 

 
});

.mobile-nav { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 

 
.show-nav { 
 
    display: block; 
 
} 
 

 
.hide-nav { 
 
    display: none 
 
} 
 

 
.toggle-nav { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 768px) { 
 
    .toggle-nav { 
 
    display: inline-block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggle-nav">Toggle Nav</div> 
 

 
<div class="mobile-nav"></div>