树状结构导航条css+javascript简单实现

最新推荐文章于 2023-05-29 10:36:43 发布

zmn373585115

最新推荐文章于 2023-05-29 10:36:43 发布

阅读量245

点赞数

分类专栏： div+css 文章标签： CSS JavaScript Blog .net HTML ViewUI

本文链接：https://blog.csdn.net/zmn373585115/article/details/83430500

版权

div+css 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

html>
<script>
function changevisible(element){
var children = element.parentNode.childNodes;
for(var i= 0; i<children.length;i++){
if(children[i].nodeName == "DIV"){
var className = children[i].className;
if(className == "show"){
element.className="fold";
children[i].className="hidden";
}
else{
element.className="expend";
children[i].className="show";
}
}
}
}
</script>
<style type="text/css">
div.show{
display:block;
width:100%;
background-color:#339966;
}
div.hidden{
display:none;
}

span.fold{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("P1.gif");
background-repeat:no-repeat;

}
span.expend{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("M1.gif");
background-repeat:no-repeat;
}
span.2blank{
width:20px;
}
span.3blank{
width:40px;
}
span.def{
width:20px;
height:20px;
padding:0px 10px 0px 10px;
background-image:url("D.gif");
background-repeat:no-repeat;
}
</style>
<body>
<div id="sidenav">
<div class="show"><span class="fold" οnclick="changevisible(this)"> </span>10
<div class="hidden"><span class="2blank"> </span><span class="fold" οnclick="changevisible(this)"> </span>20</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" οnclick="changevisible(this)"> </span>21</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" οnclick="changevisible(this)"> </span>22
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>30</div>
<div class="hidden"><span class="3blank"> </span><span class="def"> </span>31</div>
</div>
</div>
</div>
</body>
</html>

（由于展开和收起的图标使用的相对链接，利用改变span的className属性来改变图标，在blog里不方便实用，暂且用+代替原来图表的位置，大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif，和你的页面放在一层文件夹下即可）

转载于：http://blog.csdn.net/dyingcow/archive/2006/09/20/1255794.aspx

zmn373585115

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
树状结构导航条css+javascript简单实现

html> function changevisible(element){ var children = element.parentNode.childNodes; for(var i= 0; i
复制链接

扫一扫