我正在嘗試在自己的 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 >
<ul>
<li>Posts</li>
<li>Add new post</li>
<li>Comments</li>
<li>Images</li>
<li>Videos</li>
<li>Users</li>
</ul>
</div>
<button onclick="toggleMenu()">
<i ></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 是相關的，所以我現在不會發布它，但如果你們中的任何人認為它有價值，我會添加它。
uj5u.com熱心網友回復：
不要使用行內處理程式。. 它們需要全球污染，有一個瘋狂的范圍鏈，還有一系列其他問題。這些問題之一是其他 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() {
// ...
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/418589.html
標籤：