jquery響應菜單無法正常工作

我想使用jquery製作響應式導航欄，但好像toggleClass沒有正確應用。下面是我的JS和HTML：jquery響應菜單無法正常工作

$(document).ready(function() {   
    $(".burguer-nav").on("click", function() {  
     $("header nav ul").toggleClass("open"); 
    }); 
}); 

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
     <script src="menu.js"> </script> 
     <style> 
      @media only screen and (max-width: 480px){ 
       a{ 
        text-align:center; 
       } 
       .burguer-nav{ 
        display: block; 
        height: 40px; 
        cursor: pointer; 
       } 
       header nav ul{ 
        overflow:hidden; 
        height:0; 
        background-color: #505050; 
       } 
       header nav ul.open{ 
        height:auto; 
       } 
       header nav ul li{ 
        float:none; 
        width:100%; 
        margin:0; 
       } 
       header nav ul li a{ 
        color: #fff; 
        padding: 10px; 
        display:block; 
        margin:0; 
        border-bottom: 1px solid #404040; 
       } 
      } 
     </style> 
    </head> 
    <link rel="stylesheet" href="stylesheet.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
    <body> 
    <header> 
     <nav> 
      <a href="" class="burguer-nav"><i class="fa fa-bars" aria-hidden="true"></i> Primary Menu</a> 
      <ul> 
       <li><a href=""></a>Home</li> 
       <li><a href=""></a>About</li> 
       <li><a href=""></a>Contact</li> 
       <li><a href=""></a>Services</li> 
      </ul> 
     </nav> 
    </header> 
    </body> 
</html>

此刻，當我點擊鏈接（ANCOR標籤）的菜單快速出現和消失，然後再次所以實際上甚至不看菜單項上。如何才能使切換正常工作？在代碼中做錯了什麼？

來源

2016-08-18 Wosley Alarico

的問題是，你的漢堡菜單實際上是一個鏈接。當你點擊它時，你會被重定向到一個新頁面（在這種情況下，重新加載）。既然你不想重定向用戶，你可以完全移除錨元素。這應該工作：

<header> 
     <nav> 
      <span class="burguer-nav"><i class="fa fa-bars" aria-hidden="true"></i> Primary Menu</span> 
      <ul> 
       <li><a href=""></a>Home</li> 
       <li><a href=""></a>About</li> 
       <li><a href=""></a>Contact</li> 
       <li><a href=""></a>Services</li> 
      </ul> 
     </nav> 
    </header>

See JSFiddle Demo

另外，如果由於某種原因，你想保持由錨元件提供的樣式，你可以改變<a href=''>...</a>到<a href='#'>...</a>。

來源

2016-08-18 07:59:38

由於它工作正常。如何向它添加更好的轉換，使其不會突然下降？ –

樂意幫忙@WosleyAlarico。由於我解決了您的問題，請注意並接受我的回答，以便其他人知道您的問題已修復。至於動畫，有很多方法可以解決這個問題，您可以從零開始構建動畫或使用jQuery/Boostrap下拉菜單。一些好的資源開始閱讀是http://www.w3schools.com/howto/howto_js_dropdown.asp，http://stackoverflow.com/questions/25876195/bootstrap-3-dropdown-transition。 –

@Decron Bernard。答覆投票再次感謝支持。 –

可能該頁面剛剛重新加載，因爲您正在點擊鏈接。爲了應對這種添加preventDefault給你的函數：

$(".burguer-nav").on("click", function(e) { 
    e.preventDefault(); 
    $("header nav ul").toggleClass("open"); 
});

來源

2016-08-18 07:58:18

發生這種情況是因爲您沒有刪除實際的<a>事件，該事件會重新加載頁面，因爲href屬性中沒有數據。

要麼提供一個包括hashtag（<a href="#">），或通過做防止事件：

$(document).ready(function() {   
    $(".burguer-nav").on("click", function(e) { 
    e.preventDefault() 
    $("header nav ul").toggleClass("open"); 
    }); 
});

More information aboutevent.preventDefault()

來源

2016-08-18 08:00:50 Roberrrt

jquery響應菜單無法正常工作

回答

相關問題