【问题标题】：Creating an accordion with jQuery, but got "$ is not defined"使用 jQuery 创建手风琴，但得到“$ 未定义”
【发布时间】：2018-06-23 19:23:33
【问题描述】：

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

我查看了我的 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 脚本下方。有人可以帮忙吗？

【问题讨论】：

你试过把这一切都放在 $(document).ready(function() { //YOUR CODE HERE });
我认为只有在 HTML 代码中使用该函数才重要？无论哪种方式，我都尝试过，但没有成功。
你能提供一个minimal reproducible example吗？

标签： javascript jquery html jquery-animate accordion

【解决方案1】：

在加载和定义之前调用 jQuery（它的简写 $）。将您的脚本放在 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>

使用引导

首先，使用下面的这些模板并将 jQuery 放在 HTML 页面的底部，在结束 body 标记之前，但在实际脚本和 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

引导程序 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
});

或使用它的简写版本：

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

或在ES6:

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

【讨论】：

【解决方案2】：

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

您需要在代码中导入 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上可用代码的工作版本

【讨论】：

【解决方案3】：

这似乎是一个 linter (JSLint/ESLint) 警告。在源文件中使用 global 指令来避免警告：

/*global $, jQuery*/

【讨论】：