Пользовательский интерфейс JQuery: Аккордеон — это не функция

ОТВЕЧАТЬ:

Оказывается, что в нижней части HTML, сгенерированного шаблоном HTML5, есть вызов CDN для JQuery, поэтому он выгрузил JQuery UI.

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

У меня есть JQuery и пользовательский интерфейс JQuery, связанные в моем, но и функции JQuery выглядят так, как будто они работают, но по какой-то причине он отказывается признать, что аккордеон существует. Я получаю "Uncaught TypeError: $(...).accordion не является функцией"

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>DaCara</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.css">
    <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    $(function(){
      $(".news_container").accordion();
    });
    </script>
</head>

Определение раздела:

            <div class="news_container">
          <h3>Test News, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News2, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test News3, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
          <h3>Test New4, please ignore</h3>
          <div class="news_item">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut
              gravida at est non blandit. Maecenas elementum ullamcorper
              rutrum. Suspendisse  dignissim porta congue. Mauris finibus
              neque diam,  ullamcorper sodales est suscipit a.
            </p>
          </div>
        </div>

html jquery jquery-ui html5boilerplate
person Sevvy325    schedule 08.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы уверены, что это то, что у вас есть? Как минимум, jQuery вернет коллекцию jQuery, содержащую совпадающие элементы. Даже если он ничего не найдет, он все равно вернет эту коллекцию, хотя и пустую. Даже пустое, accordion() все еще должно вызываться. Вывод таков, что $() не возвращает коллекцию jQuery. Это означает, что у вас есть какая-то опечатка или что jQuery не подключен к $. Хотя как это могло произойти, но все же допустить уже готовую стенографию — загадка.

jsfiddle, демонстрирующий это, находится здесь. Обратите внимание, что несмотря на отсутствие содержимого, accordian() работает без проблем.

person Ouroborus    schedule 09.05.2016
comment
Я так не думаю. Контейнер новостей содержит 5 наборов элементов ‹h3›‹div›, как показано здесь: jqueryui.com/accordion/#default Я добавлю html контейнера новостей для проверки. - person Sevvy325; 09.05.2016
comment
Если я делаю $(.news_container) в консоли, он возвращает div вместе со всеми парами. Так что, по крайней мере, кажется, что они их находят. - person Sevvy325; 09.05.2016
comment
Как ни странно, если я вставлю свой div сверху в добавленный вами jsfiddle, он сработает. Это заставляет меня поверить, что у меня где-то должна быть какая-то ошибка импорта. Я пробовал несколько способов импорта. Однако загрузка и ссылка на локальные файлы и CDN. - person Sevvy325; 09.05.2016
comment
@ Sevvy325 Sevvy325 Он не должен возвращать div как элемент, он должен возвращать объект. Объект будет коллекцией jQuery, массивоподобным объектом, а совпадающие элементы будут упоминаться как пронумерованные свойства в объекте. Используя ваш код, это можно увидеть здесь. - person Ouroborus; 09.05.2016
comment
@ Sevvy325 Sevvy325 Не знаю, актуально ли это, но jQuery - не единственная библиотека, которая использует $. прототип и MooTools также используют его. Если используются эти или что-то еще с функциональностью, аналогичной jQuery, вы можете столкнуться с этой проблемой. Может быть, попробуйте использовать jQuery вместо $. - person Ouroborus; 09.05.2016
comment
Давайте продолжим обсуждение в чате. - person Sevvy325; 09.05.2016
comment
Для потомков: Ниже заголовок HTML5 Boilerplate загружается в JQuery для бита Google Analytics (из Sevvy325 в обсуждении) и перезаписывает глобальный пользовательский интерфейс jQuery/jQuery OP. - person Ouroborus; 09.05.2016