Question

我从使用mysql获取数据以在一种层次结构中生成div标签。 div标签内有div标签，它们位于div标签内。这是使用嵌套的while循环创建的。输出是这样的，其中id是通过php唯一制作的：

<div class="holder">
    <label class="toggle" id=$courseCategory>Category 1</label>
    <div class="content" id=$courseCategory>
        <label class="toggle" id=$courseTopic>Topic 1</label>
        <div class="content" id=$courseTopic>
        </div>
    </div>
    <label class="toggle" id=$courseCategpry>Category 2</label>
</div>

这是生成内容的基本结构。

创建结构的PHP是：

<?php 
include "connect.php";

global $con;

$qryCat=mysqli_query($con, "SELECT DISTINCT CourseCategory FROM tblCourse");


while($row=mysqli_fetch_array($qryCat, MYSQL_ASSOC)){
    $courseCat = $row['CourseCategory'];
    //print $courseCat 

    echo "<label  class ='toggle' id='".$courseCat."'>".$courseCat."</label>";
    echo "<div  class ='content' style = 'display:none;' id='div".$courseCat."'>";

    $qryTop=mysqli_query($con, "SELECT DISTINCT CourseTopic FROM tblCourse WHERE CourseCategory = '$courseCat'");
    while($row=mysqli_fetch_array($qryTop, MYSQL_ASSOC)){
        $courseTop = $row['CourseTopic'];
        //print $courseTop;
        echo "<label class ='toggle' id='".$courseTop."'>".$courseTop."</label><br/>";
        echo "<div class ='content' style = 'display:none;' id='div".$courseTop."'>";

        $qryLevel=mysqli_query($con, "SELECT DISTINCT CourseLevel FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop'");
        while($row=mysqli_fetch_array($qryLevel, MYSQL_ASSOC)){
            $courseLevel = $row['CourseLevel'];
            //print $courseLevel;
            echo "<label class ='toggle' id='".$courseTop.$courseLevel."'>".$courseLevel."</label><br/>";
            echo "<div class ='content' style = 'display:none;' id='div'".$courseTop.$courseLevel."'>";

            $qryCourse=mysqli_query($con, "SELECT DISTINCT CourseCode, CourseName FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop' AND CourseLevel = '$courseLevel'");
            while($row=mysqli_fetch_array($qryCourse, MYSQL_ASSOC)){
                $courseCode =$row['CourseCode'];
                $courseName = $row['CourseName'];
                //print $courseName;
                echo "<label id='".$courseCode."'>".$courseName."</label><br/>";
                echo "<div id='div".$courseCode."'></div>";
            }
            echo "</div>";
        }
        echo "</div>";
    }
    echo "</div><br/>";
}
?>

我想使用jQuery像菜单一样切换每个部分。因此，当我按类别1时，显示类别1下的所有主题，然后我可以单击主题以显示菜单的下一级别。

我试图让这个工作起来尝试了几个不同的东西。以下代码适用于第一级。我可以切换类别，但是当点击显示的主题时没有任何反应。

$(document).ready(function(){
    $(".toggle").click(function() {
        $(this).next(".content").toggle("slow");
    });
});

我也试过这个代码，允许整个＆＃34;树＆＃34;扩大，但它会切换所有兄弟姐妹。

$(document).ready(function(){
    $(".toggle").click(function() {
        $(this).siblings(".content").toggle("slow");
    });
});

两者都有我想要的最终结果的方面，但我无法弄清楚如何导航树以做我想要的。

非常感谢任何帮助。

编辑：在浏览完PHP后，看看是否存在问题，我仍然无法使其正常运行。我已经添加了PHP，看看眼睛更敏锐的人是否能看出这是不是问题。

Answer 1

你可以尝试一下吗？这是你正在寻找还是

你看起来像“ACCORDION MENU”？
您的准则工作正常。问题可能是类别2中没有内容。

脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggle").click(function() {
        $(this).next(".content").toggle("slow");
    });
});
</script>

CSS

<style>
label + .content{
    display:none;
}
label + .open{
    display:block;
}
</style>

HTML

<div class="holder">
    <label class="toggle" id=$courseCategory>Category 1</label>
    <div class="content open" id=$courseCategory>
        <label class="toggle" id=$courseTopic>Topic 1</label>
        <div class="content" id=$courseTopic>
        </div>
    </div><br/>
    <label class="toggle" id=$courseCategpry>Category 2</label>
    <div class="content" id=$courseCategory>
        <label class="toggle" id=$courseTopic>Topic 2</label>
        <div class="content" id=$courseTopic>
        </div>
    </div><br/>
    <label class="toggle" id=$courseCategpry>Category 3</label>
    <div class="content" id=$courseCategory>
        <label class="toggle" id=$courseTopic>Topic 3</label>
        <div class="content" id=$courseTopic>
        </div>
    </div><br/>
</div>

在php中尝试＃2

<div class="holder">
    <?php 
        $count=0;
        for($i=0;$i<5;$i++){ 
        $count=$count+1;
    ?>
    <label class="toggle" id=$courseCategory>Category <?php echo $count; ?></label>
    <div class="content open" id=$courseCategory>
        <label class="toggle" id=$courseTopic>Topic <?php echo $count; ?></label>
        <div class="content" id=$courseTopic>
        </div>
    </div><br/>
    <?php } ?>
</div>

Answer 2

您正在动态生成的绑定点击事件。因此，点击功能可能在那时没有与元素绑定。

检查以下链接 http://jsfiddle.net/23yxj3ny/1/

$(".holder").on('click','.toggle',function() {
      $(this).siblings(".content").toggle("slow");
 });

Answer 3

为了将来参考，问题在于PHP。我想当它正在改变它的结构之后回响。删除后，它完美无缺！

切换php生成的div元素

3 个答案: