汉堡菜单-为什么我的代码不起作用

Question

我正试图用jQuery或JS做一个简单的汉堡菜单(无论哪种方式我都很容易(，但我的代码根本不起作用，我一辈子都无法找出原因。

它的结构是左上角的汉堡，中间的标志，然后是一个侧面和右上角的篮子。

目前，我所要做的就是让导航列表在点击时出现，然后我可以对其进行样式设置。我正试图使用.hidden类在点击汉堡时将导航显示为块。

这是代码：

HTML:

<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x"></i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
<a href="search-page.html" style="text-decoration: none">Holidays</a>
</li>
<li>
<a href="sign-in.html" style="text-decoration: none">Sign In / Register</a>
</li>
</ul>
</div>
</div>
</section>

CSS：

body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
.hidden {
display: block;
}
#burger {
cursor: pointer;
}

jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("burger").click(function() {
$("nav").toggleClass("hidden");
});
</script>

如有任何帮助，我们将不胜感激。非常感谢。

Answer 1

您的代码中至少有三个问题：

• $('burger')需要是$('#burger')才能包含id选择器前缀
• 类似地，$('nav')需要是$('#nav')
• CSS中的.hidden需要是#nav.hidden，这样它就足够具体，可以覆盖默认样式。我还建议将其更改为.visible以符合其目的，但这纯粹是一个语义问题

另一个可能的问题是，您可能需要将document.ready事件处理程序添加到JS逻辑中，这取决于您将其放置在页面中的位置。这将确保jQuery代码在DOM完全加载后执行。

jQuery(function($) {
$("#burger").click(function() {
$("#nav").toggleClass("hidden");
});
});

body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header-section {
height: 100px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #999;
}
.header-container {
height: 100%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
}
.header-content {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}
.hamburger-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
background-color: red;
}
.hamburger-container i {
margin-left: 20px;
}
.header-logo-container {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
.header-profile-and-signin {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: space-around;
}
#nav {
list-style: none;
display: none;
}
#nav.hidden {
display: block;
}
#burger {
cursor: pointer;
}

<section class="header-section">
<div class="header-container">
<div class="header-content">
<div class="hamburger-container">
<i id="burger" class="fas fa-bars fa-2x">Burger</i>
</div>
<div class="header-logo-container">
<h2>Logo goes here</h2>
</div>
<div class="header-profile-and-signin">
<i class="fas fa-user-circle fa-2x"></i>
<i class="fas fa-suitcase-rolling fa-2x"></i>
</div>
<ul id="nav">
<li>
<a href="search-page.html" style="text-decoration: none">Holidays</a>
</li>
<li>
<a href="sign-in.html" style="text-decoration: none">Sign In / Register</a>
</li>
</ul>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>