Question

我正在尝试创建一个移动响应式菜单，我的主要问题是当我点击它时导航按钮不会切换。这就是我到目前为止所提出的。 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";
}

}

感谢您的帮助。的Alessandro

Answer 1

您在此处有错误：

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

<强> FIX：

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

Answer 2

将您的JavaScript更改为

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

您的代码没有做任何事情，因为您有.ready(function){});而不是.ready(function() { });

切换没有响应点击

2 个答案: