jQuery Accordion不起作用

Question

我從JQuery的網站上復制了代碼，所以我不確定我錯過了什么。 我是JQuery的新手，所以如果有人有任何意見，我會很感激。 我只是想讓手風琴工作，這樣我就可以更好地理解如何在我正在研究的項目中實現Jquery。 我曾嘗試編寫自己的方法，但通常需要很長時間才能正常工作。 所以這是我第一次嘗試使用JQuery的API之一，即使這樣也行不通。 我確信我的代碼中缺少一些愚蠢的東西，但是如果有人能指出我正確的方向，是否有一個通用的經驗法則，當我從JQuery中提取代碼時我會錯過某種方式？ 我完全是自學成才，所以我可能錯過了一些非常小但非常重要的東西。 提前致謝！

這是我的代碼：

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Prosto+One|Alef|Varela+Round'     rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <title>jQuery UI Accordion - Collapse content</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    </head>

    <body>
        <header class="cf">
        ...
        </header>
    <section>
        <div id="accordion">
      <h3>Section 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
      </div>
      <h3>Section 2</h3>
      <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
      </div>
      <h3>Section 3</h3>
      <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
      <h3>Section 4</h3>
      <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
      </div>
    </div>
        </section>
        <footer class="clear-it">
        <a href="#" id="footer-link">I'm a man.</a>
    </footer>

    <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
          $(function() {
            $( "#accordion" ).accordion({
          collapsible: true
        });
      });
      </script>


</body>
</html>

Answer 1

你在你的HTML中加載兩個不同的jquery插件所以我認為這是問題刪除兩個並檢查

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>

你只能使用其中一個

例如：

<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

如果您的腳本與最新的腳本兼容，請記住每次使用最新版本。

Answer 2

我只是復制並粘貼你的代碼，即使沒有加載.css文件和本地jQuery的錯誤，它也能正常工作。

嘗試刪除其中一個jQuery實例，因為你有2個實例。

Answer 3

您對資源的引用不正確：通過CDN加載js / css或在下載后在本地托管，以觀察更改。

截至目前，改變這些看到您的手風琴工作

內線頭號11號

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-  ui.css">

在身體結束標記行之前沒有48 49

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

jQuery Accordion不起作用

問題描述

3 個解決方案

解決方案1
1 2014-03-11 15:34:59

解決方案2
1 2014-03-11 15:36:16

解決方案3
1 已采納 2014-03-11 17:16:46

jQuery Accordion不起作用

問題描述

3 個解決方案

解決方案1 1 2014-03-11 15:34:59

解決方案2 1 2014-03-11 15:36:16

解決方案3 1 已采納 2014-03-11 17:16:46

解決方案1
1 2014-03-11 15:34:59

解決方案2
1 2014-03-11 15:36:16

解決方案3
1 已采納 2014-03-11 17:16:46