Создание аккордеона с jQuery, но получил "$ не определено" - PullRequest
Новая
       12

Создание аккордеона с jQuery, но получил "$ не определено"

0 голосов
/ 23 июня 2018

Я пытаюсь сделать простой аккордеон (разборный) для отображения разных панелей, когда кнопка нажата, но по какой-то причине она не работает.

Я посмотрел на свой 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. Может кто-нибудь помочь, пожалуйста?

Ответы [ 3 ]

0 голосов
/ 23 июня 2018

Ошибка не в классе аккордеона, а в символе $, который вы используете.

Вам нужно импортировать jQuery в ваш код, чтобы символ $ работал.

Добавьте <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> в тег html head.

Вот рабочая версия вашего кода, доступная на Code Pen https://codepen.io/puneetpalkaur/pen/Wyyzrz?editors=1010#0

0 голосов
/ 24 июня 2018

Это похоже на предупреждение linter (JSLint / ESLint). Используйте глобальную директиву в исходном файле, чтобы избежать предупреждения: 

/*global $, jQuery*/
0 голосов
/ 23 июня 2018

Вы вызываете jQuery ( его сокращение $ ) до его загрузки и определения.Поместите ваш скрипт в нужное место ( в нижней части ) тега body HTML, , затем вставьте свой код JavaScript в функцию готовности jQuery :

Ваша собственная версия 

$(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страницы, перед закрывающим тегом body, но перед вашим реальным скриптом и скриптом 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>

Аккордеоны в 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>

Аккордеоны в Bootstrap 4

Тогда положитьВаш код JavaScript в функцию jQuery ready : 

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

ИЛИ с использованием его сокращенной версии: 

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

ИЛИ в ES6 : 

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