Что не так с моим кодом JQuery? Аккордеон не работает

Есть идеи, почему не работает аккордеон? Я новичок :(

Я понятия не имею, что с этим не так.

 <!DOCTYPE HTML>
            <html lang = "en">
            <head>
            <meta charset = "utf-8">
            <title>jQuery Accordion</title>
            <script type = "text/javascript" 
            <script> src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type = "text/javascript">
             $( function() {
                $("#accordion").accordion();
               } );
            </script>
            </head>
            <body>

           <div id = "accordion">
             <h3>Section 1</h3>
             <div>
             Stuff
             </div>
             <h3>Section 2</h3>
             <div>
             Stuff
           </div>
           <h3>Section 3</h3>
           <div>
            Stuff    
            <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
            </ul>
          </div>
           <h3>Section 4</h3>
           <div>
             Stuff
           </div>
          </div>


        </body>
        </html>

ЧЧХХХПроверьте свою клавиатуру.

— 09.04.2018 05:11

Инициализировать аккордеон на готовом документе

— 09.04.2018 05:12

Вы добавили бутстрап в свой HTML? accordion принадлежит bootstrap или jquery-ui, а не jquery

— 09.04.2018 05:15

@Tej, что вы имеете в виду под инициализацией? я что-то пропустил?

— 09.04.2018 05:18

Функция accordion () основана на jQueyUI, jQuery не содержит ее. Вы должны вызвать jQuryUI перед своей функцией инициализации. Наконец, удалите строку 6: «<script type =« text / javascript »»

— 09.04.2018 06:01

javascript jquery html

09.04.2018 05:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

520

Ответы 2

<script type = "text/javascript" 
<script> src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ваш HTML недействителен. Теги должны быть закрыты, а атрибуты тега должны располагаться сразу после тега < перед его >.

Также необходимо включить jquery-ui. Видеть:

$(function() {
  $( "#accordion" ).accordion();
});

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  <title>jQuery Accordion</title>
  <script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id = "accordion">
    <h3>Section 1</h3>
    <div>
      Stuff
    </div>
    <h3>Section 2</h3>
    <div>
      Stuff
    </div>
    <h3>Section 3</h3>
    <div>
      Stuff
      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3>Section 4</h3>
    <div>
      Stuff
    </div>
  </div>
</body>
</html>

09.04.2018 05:15

Похоже, вы использовали функцию .accordion () из пользовательского интерфейса jQuery, но не добавили файл. Также источник вашего файла jquery неверен. Я вставляю сюда правильный код. Я использовал простую функцию переключения jquery, чтобы сделать это. Я также добавляю CSS в заголовок. Вы можете записать его в свой файл CSS, если используете какой-либо внешний.

    <!DOCTYPE HTML>
     <html lang = "en">
      <head>
       <meta charset = "utf-8">
        <title>jQuery Accordion</title>
        <style>
        *{  
          margin: 0px;
          padding: 0px;
        }
       .stuff {  
         display: none;
         padding: 10px;
        }
       .stuff.active {  
       display: block;
       }
     </style>
     <script src = "http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){  
      $("#accordion h3").click(function(){  
      var stuff = $(".stuff");
      $(stuff).slideUp();
      $(this).next(".stuff").slideDown();
     });
    });
</script>
</head>
<body>
<div id = "accordion">
<h3>Section 1</h3>
<div class = "stuff active"> Stuff </div>
<h3>Section 2</h3>
<div class = "stuff"> Stuff </div>
<h3>Section 3</h3>
<div class = "stuff"> Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div class = "stuff"> Stuff </div>
</div>
</body>
</html>

09.04.2018 09:54

Другие вопросы по теме

Избавьтесь от стрелок, когда они не нужны

Итерировать по URL-адресу AJAX при рендеринге из Datatables

Перемещайтесь по подменю с помощью стрелок вверх и вниз

Показать выделенный текст

Как сделать карту изображений адаптивной?

Как создать динамическое текстовое поле в ruby on rails с помощью jQuery?

Позиция, фиксированная на абсолютное значение при прокрутке, заставляет мой img прыгать

Поведение поиска Javascript / JQuery

Как создать таблицу с запросом?

Сообщение Ajax / получение с помощью JQuery

Что не так с моим кодом JQuery? Аккордеон не работает

Ответы 2

Другие вопросы по теме

Похожие вопросы