怎样用html制作树形菜单,使用js简单实现了tree树菜单

tree

.node ul{

margin-left:20px;

}

.node .node{

display:none;

}

.node .tree{

height:24px;

line-height:24px;

}

.ce_ceng_close{

background:url(images/cd_zd1.png) left center no-repeat;

padding-left: 15px;

}

.ce_ceng_open{

background:url(images/cd_zd.png) left center no-repeat;

}

目录导航

哲学、宗教

• 哲学伦理
  • 马克思主义哲学
    马克思主义哲学
    马克思主义哲学
    马克思主义哲学

哲学、宗教

• 哲学伦理
  • 马克思主义哲学
    马克思主义哲学
    马克思主义哲学
    马克思主义哲学

$(".tree").each(function(index, element) {

if($(this).next(".node").length>0){

$(this).addClass("ce_ceng_close");

}

});

$(".tree").click(function(e){

var ul = $(this).next(".node");

if(ul.css("display")=="none"){

ul.slideDown();

$(this).addClass("ce_ceng_open");

ul.find(".ce_ceng_close").removeClass("ce_ceng_open");

}else{

ul.slideUp();

$(this).removeClass("ce_ceng_open");

ul.find(".node").slideUp();

ul.find(".ce_ceng_close").removeClass("ce_ceng_open");

}

});

使用js简单实现了树菜单！相信自己你一定可以实现的更好！

实现的效果图