结合php中的jQuery来显示从数据库中获取的可折叠列表 [英] combine jquery in php for displaying a collapsible list fetched from database
问题描述
以下程序应以可折叠列表顺序显示主题和子类别。
但可折叠列表仅适用于第一个条目。其余项目显示为静态。他们不会崩溃。 为什么??????????
< 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'];？> < /跨度>
< 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><跨度> <？php echo $ val ['sub_cat_name']; ？> < /跨度>< / LI>
<？php}？>
< / UL>
< / LI>
< / UL>
<？php
}
？>
< / html>
< script src =http://code.jquery.com/jquery-1.10.1.min.js>< / script>
< script type =text / javascript> $（'＃subj_tree'）。find（'UL'）。hide（）;
$（'＃subj_tree'）。find（'SPAN' ）.click（function（e）{
$（this）.parent（）。children（'UL'）。toggle（）;
}）;
}）;
mysql db就像：
子类别： sub_cat_id ， sub_cat_type ， sub_id （外键 subject.sub_id ）
主题： sub_id ， sub_name 。
是完全错误的。你的代码也非常低效。此外，你包括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']; ？> < /跨度>
< ul>
<？php
$ sql =select * from sub_categry where sub_id =。 $行[ 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']; ？> < /跨度>< /锂>
<？php}？>
< / ul>
< / li>
< / ul>
<？php
}
？>
< script type =text / javascript> $（）$ b $（函数（）{
$（'＃subj_tree> li span'）。 （）;
$（'ul'，parent）.toggle（）;
}）;
}）;
< / script>
< / body>
< / html>
请参阅此JSFiddle以获取工作示例;
https://jsfiddle.net/qum571nn/
The following program is supposed to display the subjects and subcategory in collapsible list order.
But the collapsible list is applied for the first entry only. The rest of the items appear static. They dont collapse. Why??????????
<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 is like as follow:
sub_categry: sub_cat_id, sub_cat_type, sub_id (foreign key subject.sub_id)
subject: sub_id, sub_name.
It's because your structure is completely wrong. Your code is also wildly inefficient. Also, you are including jquery twice. That probably doesn't do much good!
Your script tag also isn't closed and it should be included within the body.(something you are also missing) Can you try it like this?:
<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>
see this JSFiddle for a working example; https://jsfiddle.net/qum571nn/
这篇关于结合php中的jQuery来显示从数据库中获取的可折叠列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
