主体html内容部分:
树形列表
<<
内容的主体
css部分:
div{float:left; height: 100px; line-height: 100px; }
#d1,#d3{ background-color: #ccff00; }
#d2{ cursor: pointer; background-color: #ffcc00; }
#d1{
width:64px;
overflow:hidden;
transition:all .5s linear;
}
js部分:
var d2=document.getElementById("d2");
d2.οnclick=function(){
//当前元素的上一个兄弟元素d1
var d1=this.previousElementSibling;
//判断当前为<
if(this.innerHTML=="<<"){
d1.style.display="none";
this.innerHTML=">>";
}else{
d1.style.display="block";
//d1.style.width="64px";直接修改宽度也可以显示隐藏
this.innerHTML="<<";
}
}
本文来源于网络:查看 >https://blog.csdn.net/wyp_comeon/article/details/76563233