我正在自己的IDE中尝试实现一个正在使用的animate.css示例。我在这里找到了这个例子。不同的是，这个例子使用了普通的JavaScript，而我正试图将其转换为jQuery。
我有一个带有onclick的按钮，它应该调用函数toggleMenu((，但该函数不起作用。控制台日志显示函数未定义，而我的脚本文件显示函数已声明，但从未读取其值。可能有一个简单的解释，但出于某种原因，我看不出问题所在。
这是代码：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade-in menu</title>
<script src="https://kit.fontawesome.com/f2cc866093.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="menu">
<ul>
<li>Posts</li>
<li>Add new post</li>
<li>Comments</li>
<li>Images</li>
<li>Videos</li>
<li>Users</li>
</ul>
</div>
<button class="toggle-menu" onclick="toggleMenu()">
<i class="fas fa-bars"></i>
</button>
</body>
</html>
jQuery:
$(function() {
var isOpen = false;
function toggleMenu() {
const menuElement = $('.menu');
const toggleIcon = $('.fas');
if (!isOpen) {
menuElement.addClass('animate__animated', 'animate__fadeInLeft', 'open');
toggleIcon.removeClass('fa-bars');
toggleIcon.addClass('fa-times');
isOpen = true;
} else {
menuElement.removeClass('animate__fadeInLeft');
menuElement.addClass('animate__animated', 'animate__fadeOutLeft');
toggleIcon.removeClass('fa-times');
toggleIcon.addClass('fa-bars');
isOpen = false;
}
function handleAnimationEnd() {
menuElement.removeClass('animate__animated', 'animate__fadeInLeft', 'animate__fadeOutLeft');
if (!isOpen) {
menuElement.removeClass('open');
}
menuElement.off('animationend');
}
menuElement.on('animationend', function() {
handleAnimationEnd();
});
}
});
我不认为CSS是相关的，所以我现在不会发布它，但如果你们中的任何人认为它有价值，我会添加它。
不要使用内联处理程序。。它们需要全球污染，有一个疯狂的范围链，还有一系列其他问题。其中一个问题是其他JavaScript无法看到函数正在被调用。
即使没有linter警告，您当前的代码也不会工作，因为toggleMenu是在函数内部声明的，因此对内联处理程序来说是不可见的。
使用JavaScript:连接侦听器
<button class="toggle-menu">
并更改
$(function() {
var isOpen = false;
function toggleMenu() {
// ...
至
$(function() {
var isOpen = false;
$('.toggle-menu').on('click', toggleMenu);
function toggleMenu() {
// ...