Javascript 尝试使用add and removeClass函数合并简单的滑块菜单，但没有成功
我尝试了几种使用jQuery让我的滑块菜单工作的方法，最多只能让它工作一次，然后我必须刷新页面才能再次工作。现在我已经设法超越了自己，它已经完全停止工作了。我正在分享我的代码，希望有人能注意到一个明显的错误——脚本是一个简单的add/removeClass函数。我最初在外部JS文件中有documentready函数，但将其移到了头部，如图所示，因为我显然不知道我在做什么。我得到的一个常见错误消息是，$没有定义，但是，我在原始的external menu.js文件中放置了一个console.log，这向我表明我的jQuery库将被调用而不会出现问题-但正如我所说，我不知道我在做什么Javascript 尝试使用add and removeClass函数合并简单的滑块菜单，但没有成功,javascript,jquery,Javascript,Jquery,我尝试了几种使用jQuery让我的滑块菜单工作的方法，最多只能让它工作一次，然后我必须刷新页面才能再次工作。现在我已经设法超越了自己，它已经完全停止工作了。我正在分享我的代码，希望有人能注意到一个明显的错误——脚本是一个简单的add/removeClass函数。我最初在外部JS文件中有documentready函数，但将其移到了头部，如图所示，因为我显然不知道我在做什么。我得到的一个常见错误消息是，$没有定义，但是，我在原始的external menu.js文件中放置了一个console.log
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width+device-width, initial-scale+1">
<!-- [if lt IE 9]>
<script src:"//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![end if]-->
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="icon" href="img/favicon.jpg">
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
console.log( "document loaded" );
});
$( window ).on( "load", function() {
console.log( "window loaded" );
});
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script language="javascript" type="text/javascript" src="js/menu.js"></script>
<title>xxxxxxxxxxxxxxxxxxxxxxxxxx</title>
</head>
<body>
<header><a href="https://www.w3schools.com/css/css_link.asp"><img src="img/header-banner.gif"></a></header>
<i class="far fa-circle toggle_menu"></i>
<div class="sidebar_menu">
<i class="fas fa-times"></i>
<ul class="navigation">
<li class="navigation_item"><a href="https://www.w3schools.com/css/css_link.asp">news</a></li>
<li class="navigation_item"><a href="https://www.w3schools.com/css/css_link.asp">text</a></li>
<li class="navigation_item"><a href="https://www.w3schools.com/css/css_link.asp">exhibition</a></li>
<li class="navigation_item"><a href="https://www.w3schools.com/css/css_link.asp">about</a></li>
</ul>
</div>`
$(".toggle_menu").click(function(){
$(".sidebar_menu").addClass("show_menu");
$(".toggle_menu").addClass("opacity_zero");
});
$(".fa-times").click (function(){
$(".sidebar_menu").removeClass("show_menu");
$(".toggle_menu").removeClass("opacity_zero");
});
很可能是FontAwsome导致了这里的问题。此库的最新版本将i标记替换为svg，它不继承切换菜单类。 尝试用按钮元素包装FontAwsome图标。代码应该如下所示：
<button class="toggle_menu">
<i class="far fa-circle"></i>
</button>
1-将动作代码包装到DOM中，以便在其上生成侦听器 2-将动作类从
$（文档）.ready（函数（）{
$（“.toggle_menu”）。单击（函数（）{
$（“.sidebar_menu”）.addClass（“show_menu”）；
$（“.toggle_menu”）.addClass（“不透明度_为零”）；
});
$（“.fa次”）。单击（函数（）{
$（“.sidebar_menu”）.removeClass（“show_menu”）；
$（“.toggle_menu”）.removeClass（“不透明度_为零”）；
});
})@导入url（'https://fonts.googleapis.com/css?family=Muli');
html，正文{字体大小：12px；
保证金：0；
填充：0
}
标题{宽度：970px；
高度：90px；
}
.切换菜单{
位置：固定；
填充：15px 20px 15px 15px；
边际上限：0px；
左边距：40px；
颜色：黑色；
光标：指针；
背景色：#648B79；
z指数：1000000；
字号：2em；
不透明度：1；
}
.侧边栏菜单{
位置：固定；
宽度：200px；
左边距：-100%；
溢出：隐藏；
高度：100vh；
背景色：rgba（17,17,17,0.9）；
不透明度：0.9；
过渡：所有0.3秒的缓进缓出；
文本对齐：左对齐；
}
.fa时代{
右：10px；
顶部：10px；
不透明度：0.4；
光标：指针；
位置：绝对位置；
颜色：白色；
过渡：所有0.3秒的缓进缓出；
}
.fa次：悬停{不透明度：1；
}
.导航{
字体系列：“Muli”；
字号：1.5em；
列表样式类型：无；
显示：块；
边缘顶部：20px；
左边距：10px；
右边距：自动；
过渡：所有0.3秒的缓进缓出；
}
.导航项目{
利润率：10px；
过渡：所有0.3秒的缓进缓出；
}
.显示菜单{
左边距：0px；
}
.u零{
不透明度：0；
过渡：所有0.3秒的缓进缓出；
}
#主要{
背景色：浅绿色；
字体系列：“Muli”、“无衬线”；
字号：1em；
宽度：900px；
高度：900px；
位置：相对位置；
顶部：0px；
左：201px；
}
#幻灯片{字体系列：'Muli'，无衬线；
填充：15px；
}
#页脚{字体系列：'Muli'；
背景色：浅绿色；
边界：10px；
位置：固定；
底部：100%；
底部：0；
宽度：100%；
}
答：链接{颜色：#555；文本装饰：无}
答：访问{颜色：#555；文字装饰：无}
a:hover{color:aqua；文本装饰：无；过渡：0.05s；}
`menu.jsjquery.js<button class="toggle_menu">
<i class="far fa-circle"></i>
</button>