私の問題を自分のjQueryで解決するには

Question

私は現在、私自身の個人用ウェブサイトを構築していて、自分のjQueryに問題があります。私はモバイル上で消えて、ボタンをクリックすると再び表示される応答のあるナビゲーションバーを作ろうとしています。私はモバイル側が正常に動作しているが、私はそれを作って、モバイルビューとデスクトップビューを切り替えて、ナビゲーションをプラットフォームに合わせて切り替えることができるようにしたい。モバイル上のナビゲーションバーを閉じずにデスクトップをデスクトップにスライドさせても問題ありませんが、モバイル上でナビゲーションバーを閉じると、クラスがなくなり、表示されます：none;表示するクラスが必要ですが、何らかの理由でリセットボタンをクリックしてリセットボタンをクリックしたときに何もしない場合でも、jQueryがナビゲーションに表示するクラスを追加するように設定されていても何もしませんバー彼女は私がセットアップしているhtmlファイルです。

<header> 
    <a href="#menu" id="reset">Reset</a> 
    <center> 
     <h1 class="title">Theme</h1> 
     <p class="kicker">Kicker</p> 
     <a class="btn-a" href="#home"> 
      <span class="btn-1">Get Started Now</span> 
     </a> 
    </center> 
</header> 
<nav class="nav-bar" id="home"> 
    <div class="handle" id="click"> 
     <div id="hamburger" class="hamburglar is-closed"> 
      <div class="burger-icon"> 
       <div class="burger-container"> 
        <span class="burger-bun-top"></span> 
        <span class="burger-filling"></span> 
        <span class="burger-bun-bot"></span> 
       </div> 
      </div> 
      <!-- svg ring containter --> 
      <div class="burger-ring"> 
       <svg class="svg-ring"> 
        <path class="path" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" /> 
       </svg> 
      </div> 
      <!-- the masked path that animates the fill to the ring --> 
     </div> 
    </div> 
    <ul id="menu"> 
     <a class="link" href="#contact"> 
      <li>Contact</li> 
     </a> 
     <a class="link" href="#services"> 
      <li>Services</li> 
     </a> 
     <a class="link" href="#home"> 
      <li>Home</li> 
     </a> 
    </ul> 
</nav> 

リセットボタンのIDはリセットされています。そしてここに私のjQueryのメニュー

<!-- jQuery --> 
    <script src="js\jquery-3.1.1.js"></script> 
    <!-- My JavaScript and jQuery scripts --> 
    <script> 
    $(document).ready(function(){ 
     $('#click').on('click', function(){ 
     $('#menu').slideToggle(500).toggleClass('showing'); 
     }); 
    }); 
    </script> <!--End Script 1 --> 
    <script> 
    $(document).ready(function(){ 
     $('#reset').on('click', function(){ 
     $('#menu').addClass('showing'); 
     }); 
    }); 
    </script> <!--End Script 2 --> 

ためである誰かが私が起こっていただきましたことを確認していないこの問題を解決する助けてください。

Answer 1

CSSメディアクエリによってこの状況を克服することができます。

@media (min-width: 992px) { 
    #menu { display:block !important;} 
} 

メニューを表示する予定の画面として、最小幅の値を設定できます。