时间戳

首页 > 解决方案 > 使用 jQuery 创建手风琴，但得到“$ 未定义”

javascript - 使用 jQuery 创建手风琴，但得到“$ 未定义”

问题描述

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

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

标签： javascriptjqueryhtmljquery-animateaccordion

解决方案

在加载和定义之前调用 jQuery（它的简写 $ ）。将您的脚本放在HTML 的 body 标签的正确位置（底部），然后将您的 JavaScript 代码放入 jQuery 的 ready 函数中：

你自己的版本

$(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>

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>

Bootstrap 4 中的手风琴

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

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

或使用它的速记版本：

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

或者在ES6中：

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

推荐阅读