JQuery UI: 手风琴不是函数

Question

答案：

It turns out that that at the bottom of the HTML generated by HTML5 boileplate there is a call to the CDN for JQuery, so it unloaded JQuery UI.

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

我在我的 but 和 JQuery 函数中链接了 JQuery 和 JQuery UI 看起来它们正在工作，但由于某种原因它拒绝承认那个手风琴存在。我得到 "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>

Answer 1

你确定这是你的吗？至少，jQuery 会 return 一个包含匹配元素的 jQuery 集合。即使它没有找到任何东西，它仍然会 return 那个集合，尽管是一个空集合。即使是空的，accordion() 仍然可以调用。结论是 $() 不是 returning 一个 jQuery 集合。这意味着您在那里有某种拼写错误，或者 jQuery 没有附加到 $。虽然这怎么可能发生但仍然允许 onready shorthand 是个谜。

演示这一点的 jsfiddle 是 here。请注意，尽管没有内容，accordian() 也可以正常工作。

JQuery UI: 手风琴不是函数

JQuery UI: Accordion is not a functon

html

jquery

jquery-ui

html5boilerplate