レスポンシブなナビゲーションがデフォルトで開きます

Question

私はHTMLページを作成していて、レスポンシブなナビゲーションメニューを作成しました。 1つの例外を除いて正常に動作します。ブラウザのサイズを変更し、通常のナビゲーションが応答プルダウンメニューに切り替わると、メニューはデフォルトで開いています。私はそれがデフォルトで閉じられ、ユーザーがメニューボタンをクリックしたときにのみ開くようにしたいと思います。ここで

は私のHTMLコードです：

<div class="main-nav" id="navbarResponsive"> 
    <a href="#" id="pull"></a> 
    <ul class="nav navbar-nav" id="respNav"> 
    <li class="nav-item"><a href="#">Home</a></li> 
    <li class="nav-item"><a href="#">Blog </a></li> 
    <li class="nav-item"><a href="#">Features</a></li> 
    <li class="nav-item"><a href="#">Invest</a></li> 
    <li class="nav-item"><a href="#">Contact</a></li> 
    </ul> 
</div> 

、ここでは私のjqueryのコードです：

$(function() { 
    var pull = $('#pull'); 
    menu = $('.main-nav ul'); 
    menuHeight = menu.height(); 

    $(pull).on('click', function(e) { 
     e.preventDefault(); 
     menu.slideToggle(); 
    }); 
}); 

$(window).resize(function(){ 
    var w = $(window).width(); 
    if(w > 320 && menu.is(':hidden')) { 
    menu.removeAttr('style'); 
    } 
}); 

Answer 1

、デバイスの解像度にCSSファイルのアコーディオンで

.main-nav .navbar-nav{ 
    display : none; 
}