切换点击无响应答案

【问题标题】：Toggle not responding on click切换点击无响应
【发布时间】：2015-11-09 20:16:13
【问题描述】：

我正在尝试创建一个移动响应菜单，我的主要问题是当我点击它时导航按钮不会切换。这就是我到目前为止提出的。 HTML + JQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function) {
        $('span.nav-btn').click(function() {
            $('ul.nav').slideToggle();
        });
    });
    </script>
</head>
<body>
    <header>
        <h1>Hamburger MENU</h1>
    </header>
        <nav>
            <span class="nav-btn"></span>
            <ul class="hamburger">
                <li><a href="#">Desktop 1</a></li>
                <li><a href="#">Desktop 2</a></li>
                <li><a href="#">Desktop 3</a></li>
                <li><a href="#">Desktop 4</a></li>
            </ul>
        </nav>

这是 CSS：

header {
background-color: #23DA43;
}

h1 {
width: 100%;
text-align: center;
padding: 10px 0 10px 0;
}

.hamburger {
background-color: #333;
color: #fff;
margin: 0;
list-style: none;
text-align: center;
}

.hamburger li {
display: inline-block;
}

.hamburger li a {
text-decoration: none;
font-size: 40px;
color: #fff;
}


@media screen and (max-width: 900px) {

.hamburger {
    text-align: left;
    display: none;
}

.hamburger li {
    display: block;
}

.nav-btn {
    display: block;
    background-color: #333;
    color: #fff;
    font-size: 40px;
    text-align: center;
    cursor: pointer;
}

.nav-btn:before {
    content: "Menu";
}

}

感谢您的帮助。亚历山德罗

【问题讨论】：

$('ul.nav').slideToggle(); 我没有看到使用nav 类的任何地方。如果该课程不存在，您可以从 ul 中选择一个课程
嗨 urnotsam，你是对的。我已经用类汉堡改变了它，但它仍然没有切换列表。
请在下面查看我的答案。它会解决你的问题
嗨 urnotsam，您的解决方案是正确的，但是如果我再次最大化窗口，ul 列表仍然隐藏，因为它们保持显示的无。我该如何解决这个问题？

标签： html css menu navigation hamburger-menu

【解决方案1】：

将您的 JavaScript 更改为如下所示

 $(document).ready(function (){
    $('.nav-btn').on("click", function() {
        $('.hamburger').slideToggle("slow");
    });
});

您的代码没有执行任何操作，因为您使用的是 .ready(function){}); 而不是 .ready(function() { });

【讨论】：

非常感谢您宝贵的帮助 urnotsam。脚本终于可以运行了。

【解决方案2】：

这里有错误：

 $(document).ready(function) {
                $('span.nav-btn').click(function() {
                    $('ul.hamburger').slideToggle();
                });
            });

修复：

<!DOCTYPE html>
<html>
    <head>
        <style>

            header {
            background-color: #23DA43;
            }

            h1 {
            width: 100%;
            text-align: center;
            padding: 10px 0 10px 0;
            }

            .hamburger {
            background-color: #333;
            color: #fff;
            margin: 0;
            list-style: none;
            text-align: center;
            }

            .hamburger li {
            display: inline-block;
            }

            .hamburger li a {
            text-decoration: none;
            font-size: 40px;
            color: #fff;
            }


            @media screen and (max-width: 900px) {

                .hamburger {
                    text-align: left;
                    display: none;
                }

                .hamburger li {
                    display: block;
                }

                .nav-btn {
                    display: block;
                    background-color: #333;
                    color: #fff;
                    font-size: 40px;
                    text-align: center;
                    cursor: pointer;
                }

                .nav-btn:before {
                    content: "Menu";
                }

            }
        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script>
            $(document).ready(function() {
                $('span.nav-btn').click(function() {
                    $('ul.hamburger').slideToggle();
                });
            });
        </script>
    </head>
    <body>
        <header>
            <h1>Hamburger MENU</h1>
        </header>
        <nav>
            <span class="nav-btn"></span>
            <ul class="hamburger">
                <li><a href="#">Desktop 1</a></li>
                <li><a href="#">Desktop 2</a></li>
                <li><a href="#">Desktop 3</a></li>
                <li><a href="#">Desktop 4</a></li>
            </ul>
        </nav>
     </body>
 </html>

【讨论】：

嗨 Velko，如果我再次最大化窗口，菜单仍然隐藏，因为它保持显示的 none 属性。我知道我应该应用一些窗口调整大小功能。你能帮我解决这个问题吗？
是的，它非常基本，但仍然有效：D Source on CodePen