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响应菜单无法正常工作

回答

相关问题