Question

关于手风琴为什么不起作用的任何想法？我是一个菜鸟:(

我不知道它有什么问题。

 <!DOCTYPE HTML>
            <html lang="en">
            <head>
            <meta charset="utf-8">
            <title>jQuery Accordion</title>
            <script type="text/javascript" 
            <script> src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript">
             $( function() {
                $("#accordion").accordion();
               } );
            </script>
            </head>
            <body>

           <div id="accordion">
             <h3>Section 1</h3>
             <div>
             Stuff
             </div>
             <h3>Section 2</h3>
             <div>
             Stuff
           </div>
           <h3>Section 3</h3>
           <div>
            Stuff    
            <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
            </ul>
          </div>
           <h3>Section 4</h3>
           <div>
             Stuff
           </div>
          </div>


        </body>
        </html>

Answer 1

您的HTML无效。标签需要关闭，标签的属性需要紧跟标记>之后，jquery-ui之前。

您还需要加入$(function() { $( "#accordion" ).accordion(); });。参见：

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Accordion</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <div id="accordion">
    <h3>Section 1</h3>
    <div>
      Stuff
    </div>
    <h3>Section 2</h3>
    <div>
      Stuff
    </div>
    <h3>Section 3</h3>
    <div>
      Stuff
      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3>Section 4</h3>
    <div>
      Stuff
    </div>
  </div>
</body>
</html>

{{1}}

Answer 2

看起来您使用了jQuery UI中的.accordion（）函数，但您没有包含该文件。您的jquery文件的来源也不正确。我在这里贴上了正确的代码。我使用简单的jquery切换功能来实现它。我还在标题中添加了一些CSS。如果您使用任何外部文件，则可以将其写入CSS文件中。

    <!DOCTYPE HTML>
     <html lang="en">
      <head>
       <meta charset="utf-8">
        <title>jQuery Accordion</title>
        <style>
        *{  
          margin: 0px;
          padding: 0px;
        }
       .stuff {  
         display: none;
         padding: 10px;
        }
       .stuff.active {  
       display: block;
       }
     </style>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){  
      $("#accordion h3").click(function(){  
      var stuff = $(".stuff");
      $(stuff).slideUp();
      $(this).next(".stuff").slideDown();
     });
    });
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div class="stuff active"> Stuff </div>
<h3>Section 2</h3>
<div class="stuff"> Stuff </div>
<h3>Section 3</h3>
<div class="stuff"> Stuff
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div class="stuff"> Stuff </div>
</div>
</body>
</html>

我的JQuery代码有什么问题？手风琴不起作用

2 个答案: