简单原生js实现开关门效果
来源:互联网 发布:java小项目实例 编辑:程序博客网 时间:2024/05/18 22:16
主体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>
- 简单原生js实现开关门效果
- 【原生JS】简单放大镜效果
- 原生Js无缝滚动效果的简单实现
- 原生js简单实现jQuery的动画效果
- 原生JS实现运动效果
- 原生js放大镜效果实现
- 原生JS实现走马灯效果
- 【js基础】原生js实现模态弹窗效果
- 原生js实现document.ready效果
- 原生js实现document.ready效果
- 原生JS实现图片轮滚效果
- js实现图片轮番效果,原生代码
- 原生JS+DIV实现手机信号强度效果
- 原生 js 实现全屏滚动效果
- 原生js代码实现秒表效果
- 原生js实现的星级评分效果
- 原生js实现——轮播图效果
- 原生JS实现图片翻转旋转效果
- Java学习笔记:java基础语法
- day16(LinkedList)
- 实现选择排序和堆排序——题集(十六)
- jQuery解析xml文件,使用get方法实现省市县三级联动下拉框
- 欢迎使用CSDN-markdown编辑器
- 简单原生js实现开关门效果
- C++: 位操作
- 第一个maven示例-helloworld
- 感悟到,想写博客
- 职业生涯系列
- Qt pro文件配置多个子工程/子模块
- CloudStack管理员文档
- 由于安全加固引起的数据库不能访问
- 并发数据结构:谈谈volatile变量