<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
ul{
list-style: none;
}
.two{
display: none;
}
.three{
display: none;
}
.four{
display: none;
}
</style>
<body>
<div>
<ul>
<p class="one">第一层</p>
<li class="two">
<ul>
<p class="two2">第二层</p>
<li class="three">
<ul>
<p class="three2">第三层</p>
<li class="four">
<ul>
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
<p class="three2">第三层</p>
<li class="four">
<ul>
<li>第四层</li>
<li>第四层</li>
<li>第四层</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(".one").click(function(){
console.log(1)
if($(this).next().css('display') == 'none'){
$(this).next().show()
}else{
$(this).next().hide()
}
})
$(".two2").click(function(){
console.log(1)
if($(this).next().css('display') == 'none'){
$(this).next().show()
}else{
$(this).next().hide()
}
})
$(".three2").click(function(){
console.log(1)
if($(this).next().css('display') == 'none'){
$(this).next().show()
}else{
$(this).next().hide()
}
})
</script>
</html>
四层树状数据展示,无样式
最新推荐文章于 2020-04-30 15:31:41 发布