Javascript jQuery手风琴失败_Javascript_Jquery_Accordion

Javascript jQuery手风琴失败

javascript jquery

Javascript jQuery手风琴失败,javascript,jquery,accordion,Javascript,Jquery,Accordion,我正在尝试在我的网页中实现jQuery手风琴。它目前无法工作。任何帮助都将不胜感激。请记住，我是一个完全的新手，所以很可能我犯了一些非常业余的错误。然而，我正在努力学习，我希望有你的知识，我将能够继续这样做。这是我的密码： <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewpo

我正在尝试在我的网页中实现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>

由于脚本名称中的大写字母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>

使用

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>

删除额外的2行，而不是4行，并如上所述使用它们

我看不到手风琴初始化

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


jQuery（文档）.ready（函数（）{
$（“#手风琴”）。手风琴（）；
});

我要重申显而易见的一点，上面的每个人都是对的，你需要结合他们的答案。。以下是一个工作示例：

您不希望加载脚本两次

确保脚本URL正确。。您应该能够访问该链接并查看代码

初始化函数

您还需要在这里包含一个jQueryUICSS主题：（我选择了黑领带作为示例）

所以，把它们放在一起

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


//所有其他头部标签代码-仅加载一次
//所有的html都在body标签中
//就在关闭body标签之前
$（文档）.ready（函数（）{
$（“#手风琴”）。手风琴（）；
});

检查您的

脚本。您的jQuery库链接无效：404错误控制台上的错误表明无法加载jQuery库。请修复这些错误，然后重试。该页不应加载4个脚本
<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>