javascript - Jquery .slideToggle() 在导航栏上不起作用？

Question

我一直在网上关注各种关于如何创建响应式 header 的教程/指南，我终于能够完成它，除了我无法打开它的感觉。每当我点击 fa-bars 时，绝对没有任何反应......

HTML:

<header id="header" class="main-header">
        <div class="container">
            <h1 class="header-logo navigation-hover"><a href="/">Logo</a></h1>
            <a href="#" id="icon linksBtn" class="navigation-hover icon linksBtn"><i class="iconbars fa fa-bars" aria-hidden="true"></i></a>
            <nav class="nav" id="nav">
                <ul class="links" id="links">
                    <li class="active navigation-hover">
                        <a href="#">Home</a>
                    </li>
                    <li class="navigation-hover">
                        <a href="">About</a>
                    </li>
                    <li class="navigation-hover">
                        <a href="#">Services</a>
                    </li>
                    <li class="last navigation-hover">
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

CSS(对不起，如果它很长):

* {
margin: 0;
padding: 0;
}

#header {
top: 0;
z-index: 2;
position: fixed;
width: 100%;
height: 50px;
background: #f2f2f2;
color: #535a60;
border-bottom: 2px solid #999;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.header-logo {
padding: 0px 5px;
line-height: 50px;
margin: 0px;
font-size: 1.2em;
float: left;
}

.header-logo a {
font-family: "Lato", sans-serif;
text-decoration: none;
color: #535a60;
}

#nav {
float: right;
right: 0;
height: 50px;
}

#nav ul {
width: 100%;
display: inline-block;
top: 0;
margin: 0;
padding: 0;
}

#nav ul li {
float: left;
list-style: none;
}

#nav ul li a {
font-family: "Roboto", sans-serif;
line-height: 50px;
text-transform: uppercase;
height: 50px;
display: inline-block;
color: #535a60;
text-decoration: none;
padding: 0 20px;
font-size: 15px;
}

J查询:

$(function () {        
    var pagewidth = $(window).width(),
        links = $("#links"),
        linksBtn = $("#linksBtn"),
        icon = $("#linksBtn .iconbars");

    if (pagewidth < 700) {
        links.hide();
        icon.addClass("fa-bars");
    }

    $("#linksBtn .iconbars").click(function(e) {
        $("#links").slideToggle();
        icon.toggleClass("fa-bars");
        icon.toggleClass("fa-times");
    });

    $(window).on('resize', function () {
        if ($(this).width() > 700) {
            links.show();
            icon.addClass("fa-times");
            icon.removeClass("fa-bars");
        } else {
            links.hide();
            icon.addClass("fa-bars");
            icon.removeClass("fa-times");
        }
    })
});

Answer 1

一个元素只能有一个id

尝试:

<a href="#" id="linksBtn" class="navigation-hover icon linksBtn"><i class="iconbars fa fa-bars" aria-hidden="true"></i></a>

$("#linksBtn").click(function() {
    $("#links").slideToggle();
    icon.toggleClass("fa-bars");
    icon.toggleClass("fa-times");
});