树状结构导航条css+javascript简单实现
2006-09-20 22:22
471 查看
要做一个可以展开折叠的树状导航条,到网上看了一些实现,感觉都比较麻烦,js的代码量都不小,我的应用要求不复杂,但是要求树状结构的内容是可以改变的 。所以最后还是自己试着写了一个。
下面是演示代码,你可以按照自己的需求改变div中的内容,动态的生成div部分代码就可以实现tree结构的动态建立。
<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" onclick="changevisible(this)"> </span>10
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="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>
下面是效果演示:
+10
+20
+21
+22
·30
·31
(由于展开和收起的图标使用的相对链接,利用改变span的className属性来改变图标,在blog里不方便实用,暂且用+代替原来图表的位置,大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif,和你的页面放在一层文件夹下即可)
下面是演示代码,你可以按照自己的需求改变div中的内容,动态的生成div部分代码就可以实现tree结构的动态建立。
<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" onclick="changevisible(this)"> </span>10
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>20</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="changevisible(this)"> </span>21</div>
<div class="hidden"><span class="2blank"> </span><span class="fold" onclick="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>
下面是效果演示:
+10
+20
+21
+22
·30
·31
(由于展开和收起的图标使用的相对链接,利用改变span的className属性来改变图标,在blog里不方便实用,暂且用+代替原来图表的位置,大家使用的时候可以用你自己的图标代替M1.gif 、P1.gif、D.gif,和你的页面放在一层文件夹下即可)
相关文章推荐
- 实现对特定盘符的目录及子目录名字显示,并形成简单树状结构 ()
- javascript+css简单实现树形结构列表
- 用JavaScript实现一个简单的树结构
- 用JavaScript实现一个简单的树结构
- Javascript实现简单的选项卡
- javascript简单实现命名空间效果
- Javascript基础_嵌入图像的简单实现
- JavaScript代码轻松实现网页内容禁止复制(代码简单)
- 两种思路用javascript实现实现简单的数字滚动动画
- javascript实现简单多文件上传
- 简单实现JavaScript图片切换效果
- 数据结构与算法——基数排序简单Java实现
- JavaScript对象封装的简单实现方法(3种方法)
- javascript单例模式的简单实现方法
- 用JavaScript实现单继承和多继承的简单方法
- Javascript实现简单进度条
- JavaScript实现网页上的浮动广告的简单方法
- 数据结构笔记--栈的总结及java数组实现简单栈结构
- javascript如何用递归写一个简单的树形结构
- JavaScript栏目隐藏简单实现