我該如何解決我的問題與我的jQuery

所以我目前正在建立我自己的個人網站，並遇到了我的jQuery的問題。我正在嘗試製作一個響應式導航欄，它將在移動設備上消失，然後在您單擊按鈕時重新出現。我的手機端工作正常，但我想做到這一點，所以你可以在手機和桌面視圖之間切換，導航只需切換到適合平臺。它可以正常工作，如果你不關閉移動設備上的導航欄，然後將窗口滑動到桌面，但是如果關閉移動設備上的導航欄，它現在沒有任何類，並且將顯示：none ;.它需要顯示的類顯示，但由於某種原因，當我把重置按鈕來解決問題，當你點擊重置按鈕，它什麼都不做，即使jQuery設置爲它添加顯示類到我的導航吧她是我設置的HTML文件。我該如何解決我的問題與我的jQuery

<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>

重置按鈕具有重置的標識。這裏是我的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 -->

有人可以幫我解決這個問題，我不知道發生了什麼事情。

來源

2017-01-01 ItsClubz

你能爲此舉出一個小提琴 –

您可以通過CSS媒體查詢來克服這種情況。

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

您可以將最小寬度值設置爲您希望顯示菜單的預期屏幕。

來源

2017-01-01 09:49:17 Hanif

我該如何解決我的問題與我的jQuery

回答

相關問題