Jq实现树形菜单，可以全选，收缩
2017-04-05 09:49
555 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行业管理</title>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<ul class="farther">
<li class="class-1"><button class="btn1">缩放</button><input type="checkbox" class="checkbox-1">一级
<ul class="class-2">
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><button class="btn2">缩放</button><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li ><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
</li>
</ul>
</li>
<li class="class-1"><button class="btn1">缩放</button><input type="checkbox" class="checkbox-1">一级
<ul class="class-2">
<li><input type="checkbox" >二级</li>
<li><button class="btn2">缩放</button ><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><button class="btn2">缩放</button ><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
ad7e
</li>
</ul>
</li>
</ul>
<script>
$(".btn1").click(function(){
var parentIndex=$(this).parent().index()
$(".farther .class-2").eq(parentIndex).toggle()
})
$(".btn2").click(function(){
$(this).parent().children(".class-3").toggle()
})
$(".checkbox-1").click(function(){
var parentIndex=$(this).parent().index();
var isChecked = $(this).prop("checked");
$(".farther .class-2").eq(parentIndex).find("input").prop("checked", isChecked);
})
$(".checkbox-2").click(function(){
var parentIndex=$(this).parent().index();
var isChecked = $(this).prop("checked");
$(this).parent().find("input").prop("checked", isChecked);
})
</script>
</body>
</html>
//收缩功能
$("#hytable tbody tr ").on("click","td>img",function () {
var classname=$(this).attr("class")
classname="."+classname.substring(2,classname.length);
// alert(classname)
if($(this).attr("src")=="../static/img/down.png"){
$("#hytable tbody").children(classname).hide();
$(this).attr("src","../static/img/up.png")
}else{
$("#hytable tbody").children(classname).show();
$("#hytable tbody").children(classname).children("td").children("img:first").attr("src","../static/img/down.png")
$(this).attr("src","../static/img/down.png")
}
})
$(".btn").click(function(){
alert("asdad")
})
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行业管理</title>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<ul class="farther">
<li class="class-1"><button class="btn1">缩放</button><input type="checkbox" class="checkbox-1">一级
<ul class="class-2">
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><button class="btn2">缩放</button><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li ><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
</li>
</ul>
</li>
<li class="class-1"><button class="btn1">缩放</button><input type="checkbox" class="checkbox-1">一级
<ul class="class-2">
<li><input type="checkbox" >二级</li>
<li><button class="btn2">缩放</button ><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
</li>
<li><input type="checkbox">二级</li>
<li><input type="checkbox">二级</li>
<li><button class="btn2">缩放</button ><input type="checkbox" class="checkbox-2">二级
<ul class="class-3" >
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
<li><input type="checkbox">三级</li>
</ul>
ad7e
</li>
</ul>
</li>
</ul>
<script>
$(".btn1").click(function(){
var parentIndex=$(this).parent().index()
$(".farther .class-2").eq(parentIndex).toggle()
})
$(".btn2").click(function(){
$(this).parent().children(".class-3").toggle()
})
$(".checkbox-1").click(function(){
var parentIndex=$(this).parent().index();
var isChecked = $(this).prop("checked");
$(".farther .class-2").eq(parentIndex).find("input").prop("checked", isChecked);
})
$(".checkbox-2").click(function(){
var parentIndex=$(this).parent().index();
var isChecked = $(this).prop("checked");
$(this).parent().find("input").prop("checked", isChecked);
})
</script>
</body>
</html>
//收缩功能
$("#hytable tbody tr ").on("click","td>img",function () {
var classname=$(this).attr("class")
classname="."+classname.substring(2,classname.length);
// alert(classname)
if($(this).attr("src")=="../static/img/down.png"){
$("#hytable tbody").children(classname).hide();
$(this).attr("src","../static/img/up.png")
}else{
$("#hytable tbody").children(classname).show();
$("#hytable tbody").children(classname).children("td").children("img:first").attr("src","../static/img/down.png")
$(this).attr("src","../static/img/down.png")
}
})
$(".btn").click(function(){
alert("asdad")
})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码
- DIV+CSS+JS树形菜单,可以刷新不改变菜单
- vs2005中treeview实现树形菜单
- 可以展开刷新不改变的二级树形菜单，大类点击不展开小类，小类有旁边的图标展开（图）
- 使用tree实现无限级树形菜单
- 如何实现动态树形菜单
- 关于树形菜单 Checkbox的全选
- ActionScript 3.0 实现树形菜单。
- 左边select内容选择到右边select内容里面的js实现方法（可以多选和全选）
- 树形菜单的一个简单实现
- 用open弹出窗口，可以实现无菜单，无工具栏..........
- IE和火狐都可以实现的全选
- Struts+Hibernate+Javascript 实现无限级树形菜单(重新上传带图片)
- 可以展开刷新不改变的二级树形菜单，大类点击不展开小类，小类有旁边的图标展开（图）
- JavaScript + PHP 应用二：网页设计中树形菜单的动态实现
- DIV+Js实现简单树形菜单
- JavaScript实现树形目录式菜单
- 可以展开刷新不改变的二级树形菜单，大类点击不展开小类，小类有旁边的图标展开（图）
- 用XSL与XML实现多级树形菜单
- Asp.Net+Ajax+Access数据库实现的树形菜单