<div class="panel-body">
<form action="{:U('Cate/Catesort')}" method="post">
<table class="table table-hover table-bordered table-condensed">
<tr>
<td>序号</td>
<td>名称</td>
<td>级别</td>
<td>排序</td>
<td>操作</td>
</tr>
<volist name='cate' id="vo">
<tr level="{$vo['level']}">
<td>{$vo['id']}</td>
<td>
<a href="#" class="zd">[+]</a>
{$vo['html']}{$vo['name']}</td>
<td>{$vo['level']}</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value="{$v.sort}"/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="{:U('Cate/addCate',array('pid'=>$vo['id']))}" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="{:U('Cate/edit',array('id'=>$vo['id']))}" class="btn btn-warning">修改</a>
<a href="{:U('Cate/delCate',array('id'=>$vo['id']))}" class="btn btn-danger">删除</a>
</div>
</td>
</tr>
</volist>
<tr>
<td colspan='7'>
<div class="form-group">
<label class="col-sm-5 control-label"></label>
<div class="col-sm-5">
<button type="submit" class="btn btn-success btn-add">提交</button>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='7'>{$page}</td>
</tr>
</table>
</form>
</div><script>
$("input[name=selall]").click(function(){
// 先取出当前chkbox的状态
var check = $(this).attr("checked");
// 设置所有其他的状态和当前按钮相同
$(".delids").attr("checked", check);
});
// 选出所有的a标签绑定click事件
$(".zd").click(function(){
// 先取出所在的tr
var tr = $(this).parent().parent();
// 取出当前行的level值
var level = parseInt(tr.attr("level"));
if($(this).html() == '[-]')
{
// 把所有的子类折叠起来
// 取出后面所有的TR
tr.nextAll("tr").each(function(k, v){
$(this).find(".zd").html("[+]");
if(parseInt($(this).attr("level")) > level)
{
$(this).hide();
}
else
return false; // 直到一个LEVEL和当前LEVEL值相同的TR就退出循环
});
$(this).html('[+]');
}
else
{
// 把所有的子类折叠起来
// 取出后面所有的TR
tr.nextAll("tr").each(function(k, v){
if(parseInt($(this).attr("level")) == level+1)
{
$(this).show();
}
else
return false; // 直到一个LEVEL和当前LEVEL值相同的TR就退出循环
});
$(this).html('[-]');
}
});
</script>结果是这样的：
<div class="panel-body">
<form action="/Demon/index.php/Admin/Cate/Catesort.html" method="post">
<table class="table table-hover table-bordered table-condensed">
<tr>
<td>序号</td>
<td>名称</td>
<td>级别</td>
<td>排序</td>
<td>操作</td>
</tr>
<tr level="1">
<td>1</td>
<td>
<a href="#" class="zd">[+]</a>
CSS</td>
<td>1</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/1.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/1.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/1.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="2">
<td>3</td>
<td>
<a href="#" class="zd">[+]</a>
|_css2.0</td>
<td>2</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/3.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/3.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/3.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="1">
<td>2</td>
<td>
<a href="#" class="zd">[+]</a>
JS</td>
<td>1</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/2.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/2.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/2.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="2">
<td>4</td>
<td>
<a href="#" class="zd">[+]</a>
|_JQ</td>
<td>2</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/4.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/4.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/4.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="1">
<td>5</td>
<td>
<a href="#" class="zd">[+]</a>
PHP</td>
<td>1</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/5.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/5.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/5.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="2">
<td>6</td>
<td>
<a href="#" class="zd">[+]</a>
|_面向对象</td>
<td>2</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/6.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/6.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/6.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr><tr level="1">
<td>7</td>
<td>
<a href="#" class="zd">[+]</a>
LINUX</td>
<td>1</td>
<td>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="排序" name="sort" id="ruleTitle" value=""/>
</div>
<label class="col-sm-2 control-label"></label>
</div>
<td>
<div class="btn-group btn-group-xs">
<a href="/Demon/index.php/Admin/Cate/addCate/pid/7.html" class="btn btn-sm btn-info mhm">添加子栏目</a>
<a href="/Demon/index.php/Admin/Cate/edit/id/7.html" class="btn btn-warning">修改</a>
<a href="/Demon/index.php/Admin/Cate/delCate/id/7.html" class="btn btn-danger">删除</a>
</div>
</td>
</tr> <tr>
<td colspan='7'>
<div class="form-group">
<label class="col-sm-5 control-label"></label>
<div class="col-sm-5">
<button type="submit" class="btn btn-success btn-add">提交</button>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='7'></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<script>
$("input[name=selall]").click(function(){
// 先取出当前chkbox的状态
var check = $(this).attr("checked");
// 设置所有其他的状态和当前按钮相同
$(".delids").attr("checked", check);
});
// 选出所有的a标签绑定click事件
$(".zd").click(function(){
// 先取出所在的tr
var tr = $(this).parent().parent();
// 取出当前行的level值
var level = parseInt(tr.attr("level"));
if($(this).html() == '[-]')
{
// 把所有的子类折叠起来
// 取出后面所有的TR
tr.nextAll("tr").each(function(k, v){
$(this).find(".zd").html("[+]");
if(parseInt($(this).attr("level")) > level)
{
$(this).hide();
}
else
return false; // 直到一个LEVEL和当前LEVEL值相同的TR就退出循环
});
$(this).html('[+]');
}
else
{
// 把所有的子类折叠起来
// 取出后面所有的TR
tr.nextAll("tr").each(function(k, v){
if(parseInt($(this).attr("level")) == level+1)
{
$(this).show();
}
else
return false; // 直到一个LEVEL和当前LEVEL值相同的TR就退出循环
});
$(this).html('[-]');
}
});
</script>就是想做成点击一级栏目，打开，再点，折叠~~ 最佳答案
