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实例，因为你有两个实例。

Answer 3

您对资源的引用不正确：或者通过CDN加载js / css或者在下载它们之后在本地托管它，以观察变化。

截至目前，更改这些以了解您的手风琴作品

内线第11号

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

在身体结束标记行之前48 48

<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 个答案: