Javascript 切换汉堡菜单
我有一个汉堡包菜单，使用HTML、CSS和jQuery，它从全幅菜单变为汉堡包菜单。我需要切换下拉列表，但它没有。这是我的密码Javascript 切换汉堡菜单,javascript,jquery,html,css,menu,Javascript,Jquery,Html,Css,Menu,我有一个汉堡包菜单，使用HTML、CSS和jQuery，它从全幅菜单变为汉堡包菜单。我需要切换下拉列表，但它没有。这是我的密码 <!DOCTYPE html> <html> <head> <title>Hamburger Menu</title> </head> <body> <nav class="menu"> <ul class="active">
<!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>
汉堡包菜单
/*-----切换按钮-----*/
.切换导航{
显示：无；
}
/*-----菜单-----*/
@媒体屏幕和屏幕（最小宽度：860像素）{
.菜单{
宽度：100%；
填充：10px 18px；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景:#303030；
}
}
.菜单ul{
显示：内联块；
}
李先生{
保证金：0px 50px 0px 0px；
浮动：左；
列表样式：无；
字号：17px；
}
李：最后一个孩子{
右边距：0px；
}
.菜单a{
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
颜色：#777；
过渡：颜色线性0.15s；
}
.menu a:悬停，.menu.当前项a{
文字装饰：无；
颜色：#66a992；
}
/*-----响应的-----*/
@媒体屏幕和屏幕（最大宽度：1150px）{
.包裹{
宽度：90%；
}
}
@媒体屏幕和屏幕（最大宽度：970px）{
.搜索表格输入{
宽度：120px；
}
}
@媒体屏幕和屏幕（最大宽度：860像素）{
.菜单{
位置：相对位置；
显示：内联块；
}
.菜单ul.active{
显示：无；
}
.菜单ul{
宽度：100%；
位置：绝对位置；
最高：120%；
左：0px；
填充：10px 18px；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景:#303030；
}
.菜单：之后{
宽度：0px；
高度：0px；
位置：绝对位置；
最高：0%；
左：22px；
内容：''；
转换：翻译（0%，-100%）；
左边框：7px实心透明；
右边框：7px实心透明；
边框底部：7px实心#303030；
}
李先生{
保证金：5px0px 5px0px；
浮动：无；
显示：块；
}
.菜单a{
显示：块；
}
.切换导航{
填充：20px；
浮动：左；
显示：内联块；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景:#303030；
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
颜色：#777；
字体大小：20px；
过渡：颜色线性0.15s；
}
.切换导航：悬停，.toggle-nav.active{
文字装饰：无；
颜色：#66a992；
}
.查册表格{
保证金：12px 0px 0px 20px；
浮动：左；
}
.搜索表格输入{
盒影：-1px 1px 2px rgba（0,0,0.1）；
}
}
jQuery（文档）.ready（函数（）{
jQuery（'.toggle nav'）。单击（函数（e）{
jQuery（this.toggleClass（'active'）；
jQuery（'.menu ul'）.toggleClass（'active'）；
e、 预防默认值（）；
});
});
当我的菜单变成小屏幕的汉堡包菜单时，下拉菜单不会切换，只是保持原样。我已经查看了我的代码，但找不到问题。这就是为什么我要求你们找出它不切换的原因。我用小提琴复制了你们的代码，它似乎可以工作 您确定没有忘记jQuery吗
jQuery（文档）.ready（函数（）{
jQuery（'.toggle nav'）。单击（函数（e）{
jQuery（this.toggleClass（'active'）；
jQuery（'.menu ul'）.toggleClass（'active'）；
e、 预防默认值（）；
});
});
/*----切换按钮-----*/
.切换导航{
显示：无；
}
/*-----菜单-----*/
@媒体屏幕和屏幕（最小宽度：860像素）{
.菜单{
宽度：100%；
填充：10px 18px；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景:#303030；
}
}
.菜单ul{
显示：内联块；
}
李先生{
保证金：0px 50px 0px 0px；
浮动：左；
列表样式：无；
字号：17px；
}
李：最后一个孩子{
右边距：0px；
}
.菜单a{
文本阴影：0px 1px 0px rgba（0,0,0,0.5）；
颜色：#777；
过渡：颜色线性0.15s；
}
.menu a:悬停，.menu.当前项a{
文字装饰：无；
颜色：#66a992；
}
/*-----响应的-----*/
@媒体屏幕和屏幕（最大宽度：1150px）{
.包裹{
宽度：90%；
}
}
@媒体屏幕和屏幕（最大宽度：970px）{
.搜索表格输入{
宽度：120px；
}
}
@媒体屏幕和屏幕（最大宽度：860像素）{
.菜单{
位置：相对位置；
显示：内联块；
}
.菜单ul.active{
显示：无；
}
.菜单ul{
宽度：100%；
位置：绝对位置；
最高：120%；
左：0px；
填充：10px 18px；
盒影：0px 1px 1px rgba（0,0,0,0.15）；
边界半径：3px；
背景:#303030；
}
.菜单：之后{
宽度：0px；
高度：0px；
位置：绝对位置；
最高：0%；
左：22px；
内容：''；
转换：翻译（0%，-100%）；
左边框：7px实心透明；
右边框：7px实心透明；
边框底部：7px实心#303030；
}
李先生{
保证金：5px0px 5px0px；
浮动：无；
显示：块；
}
.菜单a{
显示器：b
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>