Question

我正在尝试在我的网页中实现jQuery手风琴。它目前无法奏效。任何帮助将非常感激。请记住，我是一个新手，所以很可能我犯了一些非常业余的错误。但是，我正在努力学习，我希望凭借你的知识，我将能够继续这样做。这是我的代码：

<html>
  <head>

    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//code.jQuery.com/jQuery-1.10.2.js"></script>
    <script src="//code.jQuery.com/ui/1.11.4/jQuery-ui.js"></script>
    <script src="//code.jQuery.com/jQuery-1.10.2.js"></script>
    <script src="//code.jQuery.com/ui/1.11.4/jQuery-ui.js"></script>

  </head>
  <body>

    <div id="accordion">

      <h3>Ice Cream Pancakes</h3>
      <div>
        <p>mmmmmmmmmmm</p>
      </div>

      <h3>Fruit Pancakes</h3>
      <div>
        <p>Not quite as nice, but acceptable</p>
      </div>

      <h3>Savoury Pancakes</h3>
      <div>
        <p>I had one once with chicken on, it was just odd!</p>
        <ol>
          <li>fried chicken</li>
          <li>pulled pork</li>
        </ol>
      </div>

      <h3>Non-Pancakes</h3>
      <div>
        <p>This is stuff that isn’t pancakes… like… cars and light bulbs…</p>
      </div>

    </div>

  </body>
</html>

我也遇到了这些错误：

Failed to load resource:
the server responded with a status of 404 (Not Found) (19:39:37:163 | error, network)
  at http://code.jquery.com/ui/1.11.4/jQuery-ui.js

Failed to load resource:
the server responded with a status of 404 (Not Found) (19:39:37:199 | error, network)
  at http://code.jquery.com/jQuery-1.10.2.js

Failed to load resource:
net::ERR_EMPTY_RESPONSE (19:39:37:217 | error, network)
  at http://localhost:8383/favicon.ico

Answer 1

使用https://code.jQuery.com代替//code.jQuery.com

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

取代4行，删除额外的2行并按上述方式使用

Answer 2

我没有看到手风琴初始化

  <script type="text/javascript">
     jQuery(document).ready(function() {
       $( "#accordion" ).accordion();
     });
  </script>

Answer 3

我要重申显而易见的事，上面的每个人都是对的，你需要结合他们的答案..这是一个有效的例子：http://codepen.io/anon/pen/pgJxEW

您不想加载脚本两次
确保您获得的脚本网址正确..您应该可以访问该链接并查看代码
初始化功能
你还想在这里包含一个jquery ui css主题：https://code.jquery.com/ui/（我选择黑领带作为例子）

所以，把它们放在一起

<head> 
// all of your other head tag code - only load this once 
<script src="//code.jQuery.com/jquery-1.10.2.js"></script>
<script src="//code.jQuery.com/ui/1.11.4/jquery-ui.js"></script>
</head> 
<body> 

// all of your html in the the body tag

// right before closing body tag 
<script type="text/javascript">
    $(document).ready(function() {
      $("#accordion").accordion();
    });
</script>
</body>

Answer 4

由于脚本名称中的大写Q，所有脚本都无法加载。试试这些

    <script src="//code.jQuery.com/jquery-1.10.2.js"></script>
    <script src="//code.jQuery.com/ui/1.11.4/jquery-ui.js"></script>

jQuery手风琴失败了

4 个答案: