我有一个使用HTML，CSS和jQuery的汉堡菜单，它从全宽菜单变为汉堡菜单。我需要切换下拉菜单，但它没有。这是我的代码。
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu</title>
</head>
<body>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">Home</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Get in Touch</a></li>
<li><a href="#">Blog</a></li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
<style type="text/css">
/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Menu -----*/
@media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
@media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
@media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
</body>
</html>
当我的菜单变成小屏幕尺寸的汉堡菜单时，下拉菜单不会切换它只是保持原样，我查看了我的代码，我找不到问题，这就是为什么我要求你们找出它为什么不能切换。
答案 0 :(得分：1)
您忘记包含对JQuery的引用。一旦你这样做，它就会起作用。 这是小提琴：
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
答案 1 :(得分：0)
我将你的代码复制到一个小提琴中，它似乎有效。
你确定你没有忘记jQuery吗？
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});/*----- Toggle Button -----*/
.toggle-nav {
display:none;
}
/*----- Menu -----*/
@media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
@media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
@media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
.search-form {
margin:12px 0px 0px 20px;
float:left;
}
.search-form input {
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">Home</a></li>
<li><a href="#">My Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Get in Touch</a></li>
<li><a href="#">Blog</a></li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>