html5+javascript+css3实现下拉列表以及折叠功能
2015-10-19 11:12
661 查看
html5+javascript+css3实现下拉列表以及折叠功能
function show(id){ var d = $('#content'+id).css('display'); if(d == 'block'){ $('#content'+id).css('display','none'); $('#img'+id).attr('src','img/bottom.png'); }else if(d == 'none'){ $('.drop_down_content').each(function(){ $(this).css('display','none'); $('.drop_down_list img').attr('src','img/bottom.png'); }); $('#content'+id).css('display','block'); $('#img'+id).attr('src','img/top.png'); } }
<div class="drop_down_list" onclick="show('1');"> <a>svg</a> <img id="img1" src="img/top.png"/> </div> <ul class="drop_down_content" id="content1" style="display:block;"> <li>姓名 <a>李雷</a></li> </ul> <div class="drop_down_list" onclick="show('2');"> <a>动画</a> <img id="img2" src="img/bottom.png"/> </div> <ul class="drop_down_content" id="content2" style="display:none;"> <li>父亲 <a>李大宝</a></li> </ul>
ul{ list-style-type: none; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; -webkit-padding-after: 0px; } .drop_down_list{ width:100%; height:44px; border-bottom: 1px solid #D9D9D9; } .drop_down_list a{ display: inline-block; height:44px; width:100px; background: url(../img/biaozhu.png) 0px 13px no-repeat; background-size: 6px 20px; padding-left: 25px; padding-top: 12px; color: #0085d0; } .drop_down_list img{ float: right; height:15px; margin: 15px 20px; } .drop_down_content a{ color: #AAAAAA; display: inline-block; float: right; margin-right: 8%; } .drop_down_content li{ height:38px; width:94%; color: #353535; margin-left: 3%; margin-right: 3%; padding-top: 15px; padding-left: 20px; border-bottom: 1px solid #D9D9D9; }
相关文章推荐
- 接口JSon字符串格式
- JS+CSS实现分类动态选择及移动功能效果代码
- jstl 遍历map
- iframe 自适应高度js
- 【转向Javascript系列】从setTimeout说事件循环模型
- js MD5加密 和 base64编码实现!
- js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
- 图片自动切换鼠标移上暂停6秒继续切换的js代码
- JS实现的简洁纵向滑动菜单(滑动门)效果
- POST上传JSON数据
- 什么是Javascript Hoisting?
- hammer.js触摸,手指缩放等许多手势操作
- JS代码的加载
- JS实现的左侧竖向滑动菜单效果代码
- jsp文件中的一些写法
- Jackson如何实现json字符串和泛型List集合之间的转换
- js 进度条,可实现结束和重新开始
- jsp实验二
- 二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单
- Extjs之Template简单应用