使用 jQuery 创建手风琴，但得到“$ is not defined”

Question

我正在尝试制作一个简单的手风琴（可折叠）以在单击按钮时显示不同的面板，但由于某种原因，它无法正常工作。

我查看了我的 DevTools，发现 $ 在定义之前已被使用。

$('.accordion').on('click', '.accordion-control', function(e) {
  $(this).next('.accordion-panel').not(':animated').slideToggle();
  e.preventDefault();
});

<ul class="accordion">
  <li>
    <button class="accordion-control">Phase one</button>
    <div class="accordion-panel">Context will go here</div>
  </li>
</ul>

我的脚本标签就在我的结束正文标签之上和我的 jQuery 脚本之下。有人可以帮忙吗？

Answer 1

你打电话给jQuery（它的shorthand$ ) 在加载和定义之前。将您的脚本放在 HTML 正文标签的正确位置（ 在底部 ）， 然后将您的 JavaScript 代码放入 jQuery's ready function:

你自己的版本

$(function() {
  $('.accordion').on('click', '.accordion-control', function(e) {
    $(this).next('.accordion-panel').not(':animated').slideToggle();
    e.preventDefault();
  });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>My Awesome Page</title>
</head>

<body>
  <ul class="accordion">
    <li>
      <button class="accordion-control">Phase one</button>
      <div class="accordion-panel">Context will go here</div>
    </li>
  </ul>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <!-- Your script or source below. -->
  <script src="scripts/my-script.js"></script>
</body>

</html>

使用Bootstrap

首先，使用下面的这些模板并将 jQuery 放在 HTML 页面的底部，在结束正文标记之前，但在您的实际内容之前脚本和 Bootstrap 的脚本：

Bootstrap 3

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <title>My Awesome Page</title>
</head>
<body>
    <h1>Hello there!</h1>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- Your script or source below. -->    
    <script src="scripts/my-script.js"></script>
</body>
</html>

Accordions in Bootstrap 3

Bootstrap 4

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>My Awesome Page</title>
</head>
<body>
    <h1>Hello there!</h1>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <!-- Your script or source below. -->
    <script src="scripts/my-script.js"></script>
</body>
</html>

Accordions in Bootstrap 4

然后将您的JavaScript代码放入jQuery的ready函数中：

$(document).ready(function() {
    // Your accordion code here
});

或使用它的shorthand版本：

$(function () {
    // Your accordion code here
});

或 ES6:

$(() => {
    // Your accordion code here
});

Answer 2

错误与手风琴无关 class，而是与您使用的 $ 符号有关。

您需要在代码中导入 jQuery，$ 符号才能工作。

在您的 html 头标签中添加 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>。

这是代码笔上可用的代码的工作版本https://codepen.io/puneetpalkaur/pen/Wyyzrz?editors=1010#0

Answer 3

这似乎是 linter (JSLint/ESLint) 警告。在源文件中使用全局指令以避免警告：

/*global $, jQuery*/

使用 jQuery 创建手风琴，但得到“$ is not defined”

Creating an accordion with jQuery, but got "$ is not defined"

html

javascript

jquery

accordion

jquery-animate

你自己的版本

使用Bootstrap

Bootstrap 3

Bootstrap 4