您的位置：首页 > Web前端 > JavaScript

简单原生js实现开关门效果

2017-08-01 23:45 549 查看

主体html内容部分：

<body>

<div id="d1">树形列表</div>

<div id="d2"><<</div>

<div id="d3">内容的主体</div>

</body>

css部分：

<style>

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;

}

</style>

js部分：

<script>

var d2=document.getElementById("d2");

d2.onclick=function(){

//当前元素的上一个兄弟元素d1

var d1=this.previousElementSibling;

//判断当前为<<时，d1为隐藏

if(this.innerHTML=="<<"){

d1.style.display="none";

this.innerHTML=">>";

}else{

d1.style.display="block";
//d1.style.width="64px";直接修改宽度也可以显示隐藏

this.innerHTML="<<";

}

}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航