Question

以下程序应以可折叠列表顺序显示主题和子类别。

但可折叠列表仅适用于第一个条目。其余项目显示为静态。他们不会崩溃。的为什么____

<html><head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>

<?php
$con = mysqli_connect("localhost","root","","test");
$sql="select * from subject";
$res_subject=mysqli_query($con,$sql);

while($row=mysqli_fetch_array($res_subject))
{
?>

<UL id="subj_tree">
    <LI><span> <?php  echo $row['sub_name'];?> </span>
        <UL>
        <?php
        $sql="select * from sub_categry where sub_id=".$row['sub_id'];
        $res_sub_cat=mysqli_query($con,$sql);
        while($val=mysqli_fetch_array($res_sub_cat))
        {       
        ?>   <LI><span> <?php echo $val['sub_cat_name']; ?> </span></LI>

        <?php } ?>
    </UL>

</LI>
</UL>
<?php
}
?>
 </html>
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   <script type="text/javascript">
      $(function(){
      $('#subj_tree').find('UL').hide();
      $('#subj_tree').find('SPAN').click(function(e){
        $(this).parent().children('UL').toggle();

  });

  });

mysql db如下所示：

sub_categry：sub_cat_id，sub_cat_type，sub_id（外键subject.sub_id）
主题：sub_id，sub_name。

Answer 1

jQuery find（）方法只为您提供匹配选择器的第一个元素。如果您希望 all 隐藏#subj_tree下的标签，则必须使用

$('#subj_tree ul').hide();

Answer 2

您无法使用find()功能触发点击。您应该使用此功能：

$('#subj_tree > li > span').click(function() {
    $(this).parent().children('UL').toggle();
});

Answer 3

这是因为你的结构是完全错误的。您的代码也非常低效。此外，你包括两次jquery。这可能没什么好处的！

你的脚本标签也没有关闭，它应该包含在正文中。（你也缺少了）你能这样试试吗？：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style>#subj_tree ul {display: none;}</style>
  </head>
  <body>
    <?php
      $con         = mysqli_connect("localhost", "root", "", "test");
      $sql         = "select * from subject";
      $res_subject = mysqli_query($con, $sql);

      while( $row = mysqli_fetch_array($res_subject) ) {
    ?>

        <ul id="subj_tree">
          <li><span> <?php echo $row['sub_name']; ?> </span>
               <ul>
          <?php
            $sql         = "select * from sub_categry where sub_id=" . $row['sub_id'];
            $res_sub_cat = mysqli_query($con, $sql);
            while( $val = mysqli_fetch_array($res_sub_cat) ) {
          ?>
                 <li><span> <?php echo $val['sub_cat_name']; ?> </span></li>

            <?php } ?>
               </ul>

          </li>
         </ul>
    <?php
  }
?>

    <script type="text/javascript">
      $(function () {
        $('#subj_tree > li span').on("click", function (e) {
          var parent = $(this).parent();
          $('ul', parent).toggle();
        });
      });
    </script>

  </body>
</html>

看一下这个JSFiddle的工作示例; https://jsfiddle.net/qum571nn/

在php中结合使用jquery来显示从数据库中获取的可折叠列表

3 个答案: