Question

我正在尝试使用jquery创建一个响应式导航栏，但似乎没有正确应用toggleClass。下面是我的js和html：

$(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标签）时，菜单会快速出现，然后再次消失，所以实际上甚至看不到菜单项。我该怎么做才能使切换正常工作？在代码中做错了什么？

Answer 1

可能页面只是重新加载，因为您点击链接。要反击，请在您的函数中添加preventDefault：

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

Answer 2

问题是你的汉堡菜单实际上是一个链接。当您单击它时，您将被重定向到新页面（在这种情况下，重新加载）。由于您不想重定向用户，因此您可以完全删除锚元素。这应该有效：

string xml1 =
    "<root>" +
    "<users>" 
    "<ID>1</ID>" +
    "<user_login>admin</user_login>" 
    "<user_pass>$P$Bdfdffddkjlkiyuyadnvjd</user_pass>" +       
    "<term_id>2</term_id>" +
    "<user_activation_key></user_activation_key>" +
    "<user_status>0</user_status>" + 
    "<display_name>admin</display_name>" +
    "</users>" +
    "</root>";

See JSFiddle Demo

此外，如果由于某种原因您想要保持锚元素提供的样式，您可以将<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>更改为<a href=''>...</a>。

Answer 3

这种情况正在发生，因为您没有删除重新加载页面的实际<a>事件，因为href属性中没有数据。

提供主题标签（<a href="#">）或通过执行以下操作来阻止事件：

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

More information about event.preventDefault()

jquery响应式菜单无法正常工作

3 个答案: