如何使用带有循环的 jQuery UI 手风琴答案

【问题标题】：How to use jQuery UI Accordion with Loop如何使用带有循环的 jQuery UI 手风琴
【发布时间】：2013-04-06 15:08:04
【问题描述】：

这是效果的jquery手风琴代码：

 $(function() {
            $( "#accordion" ).accordion({
            header: "h3"
            });
       });

这是循环（不确定循环）的数据库（mysql）的输出：

 while($showE = mysqli_fetch_array($show))
            {

            echo $showE['un_name'];  /* this should be accordion head */
            echo $showE['un_name_dec']; /* this should be accordion description */
            }

所以我的问题是，如何以手风琴效果显示它们，一切正常（我可以从数据库中获取记录），但手风琴效果没有形成，（手风琴效果不起作用）以及如何用循环显示它们？

【问题讨论】：

标签： php jquery mysql loops accordion

【解决方案1】：

jquery 脚本

$.post('server.php', function(data) {

$("#accordion").html(data);

$("#accordion").accordion();

});

Server.php

$html='';
while($showE = mysqli_fetch_array($show)) {
$html.= '<h3>'.$showE['un_name'].'</h3>';
$html.= '<div>'.$showE['un_name_dec'].'</div>';
}
echo $html;

HTML 标记

<div id='accordion'></div>

【讨论】：

我知道，但我不知道如何在 jquery 手风琴中使用（附加或其他）显示它们

【解决方案2】：

所以，你有两个文件：index.html 和 load_entries.php

index.html:

<html>
   <head>
       <!-- Make the imports of your stylesheets and scripts here -->
       <script type="text/javascript">
           $(function() {
              $("#accordion").accordion({header: "h3"});
           });
           function load_entries() {
              $.ajax({
                  url: "load_entries.php",
                  complete: function(data) {
                      $("#accordion").html(data.responseText);
                  }
              });
           }
       </script>
   </head>
   <body>
       <button onclick="load_entries();">Load</button> <!-- Button to load the entries -->
       <div id="accordion">

       </div>
   </body>
</html>

load_entries.php：

<?php
   //connect to your database here
   $sql = "SELECT * FROM entries"; //replace entries by your own table name
   $result = mysqli_query($sql);
   while($row = mysqli_fetch_array($result)) {
      echo '<h3>'.$row['un_name'].'</h3>';
      echo '<div>'.$row['un_name_dec'].'</div>';
   }
?>

【讨论】：

现在代码还应该添加创建手风琴的javascript代码
以及如何使用 jquery ajax（$.ajax 或 $.post 或 load()）获取它们