JQuery UI：手风琴不是函数答案

【问题标题】：JQuery UI: Accordion is not a functonJQuery UI：手风琴不是函数
【发布时间】：2016-05-08 23:59:07
【问题描述】：

回答：

原来在HTML5样板生成的HTML的底部有一个JQuery的CDN调用，所以它卸载了JQuery UI。

我有一个 HTML5 Boilerplate 项目，最终将通过 Django 提供服务。目前我只是想让我的前端看起来不错。

我的 JQuery 和 JQuery UI 链接在我的但 JQuery 函数看起来它们正在工作但由于某种原因它拒绝承认手风琴存在。我得到“Uncaught TypeError: $(...).accordion is not a function”

<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 定义：

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

【问题讨论】：

标签： jquery html jquery-ui html5boilerplate

【解决方案1】：

你确定这就是你所拥有的吗？至少，jQuery 会返回一个包含匹配元素的 jQuery 集合。即使它没有找到任何东西，它仍然会返回那个集合，尽管它是一个空的。即使是空的，accordion() 仍然应该可以调用。结论是 $() 没有返回 jQuery 集合。这意味着您有某种错字，或者 jQuery 没有附加到 $。虽然这如何发生但仍然允许使用准备好的速记是一个谜。

一个 jsfiddle 证明了这一点是here。请注意，尽管没有内容，accordian() 可以正常工作。

【讨论】：

我不这么认为。新闻容器包含 5 组

元素，如下所述：jqueryui.com/accordion/#default 我将添加新闻容器 html 以进行检查。
如果我在控制台中执行 $(".news_container") 它会返回 div 以及所有对。所以它至少似乎找到了它们。
奇怪的是，如果我将我的 div 从上面粘贴到您添加的 jsfiddle 中，它可以工作。这让我相信我一定有某种导入错误。我尝试了多种导入方式。然而，下载和引用本地文件和 CDN。
@Sevvy325 它不应该将 div 作为元素返回，它应该返回一个对象。该对象将是一个 jQuery 集合，一个类似数组的对象，并且匹配的元素将被引用为对象中的编号属性。使用您的代码，可以看到here。
@Sevvy325 我不知道它是否相关，但 jQuery 并不是唯一使用$ 的库。原型和 MooTools 也使用它。如果使用这些或其他具有类似于 jQuery 的功能的东西，您可能会遇到此问题。也许尝试使用jQuery 而不是$。

元素，如下所述：jqueryui.com/accordion/#default 我将添加新闻容器 html 以进行检查。