切换php生成的div元素
切换php生成的div元素
提问于 2014-09-09 13:27:20
我正在使用mysql获取数据，以一种层次结构生成div标记。div标签中有div标签，div标签中有div标签。这是使用嵌套的while循环创建的。输出如下所示，其中is是通过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像切换菜单一样切换每个部分。因此，当我按Category 1时，Category 1下的所有主题都会显示，然后我可以单击这些主题以显示下一级菜单。
我已经尝试了几种不同的方法，试图让它正常工作。下面的代码适用于第一级。我可以切换类别，但是单击显示的主题时没有任何反应。
$(document).ready(function(){
$(".toggle").click(function() {
$(this).next(".content").toggle("slow");
});
});我也试过这个代码，它允许整个“树”扩展，但它切换所有兄弟项。
$(document).ready(function(){
$(".toggle").click(function() {
$(this).siblings(".content").toggle("slow");
});
});这两个都有我想要的最终结果的方面，但我不知道如何在树中导航以便做我想做的事情。
任何帮助都将不胜感激。
编辑:在查看PHP以确定这是否是问题所在之后，我仍然无法使其正常工作。我已经添加了PHP，看看是否有更敏锐的眼睛的人可以看到这是否是问题所在。
回答 3
Stack Overflow用户
发布于 2014-09-09 13:36:34
你能试试吗？这是你要找的还是
- 您看起来像“折叠菜单”吗？
- 您的代码运行正常。问题可能是类别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>Stack Overflow用户
发布于 2014-09-09 13:51:17
您正在绑定动态生成的单击事件。因此，可能是单击函数在那个时刻没有与元素绑定。
查看下面的链接http://jsfiddle.net/23yxj3ny/1/
$(".holder").on('click','.toggle',function() {
$(this).siblings(".content").toggle("slow");
});Stack Overflow用户
发布于 2014-09-10 08:12:59
为了便于将来参考，问题出在PHP上。我猜当
在它改变了结构之后被回声。在删除
它工作得很完美！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25737214
复制相关文章
相似问题
腾讯云开发者
