js实现的展开与收起1
2017-02-27 18:48
761 查看
1.slide.html内容如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>slide</title> <link rel="stylesheet" href="slide.css"> </head> <body> <div id="pn"> <p>商品筛选</p> <p>网络:移动4G,联通3G,电信3G</p> <div id="hpn" style="display:none"> <p>价格:5000</p> <p> 特点.... </p> </div> </div> <p class="slide"><a href="javascript:showDiv()" id="strHref" class="btn-slide">更多选项+</a></p> <script src="slide.js"></script> </body> </html>
2.slide.js内容如下
function showDiv(){ document.getElementById("hpn").style.display = "block"; document.getElementById("strHref").innerHTML = "收起-"; document.getElementById("strHref").href = "javascript:hideDiv()"; } function hideDiv(){ document.getElementById("hpn").style.display = "none"; document.getElementById("strHref").innerHTML = "更多选项+"; document.getElementById("strHref").href = "javascript:showDiv()"; }
3.slide.css内容如下
body{ margin: 0 auto; padding: 0; } #pn{ background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide{ margin: 0 auto; padding: 0px; width: 600px; border-top:solid 4px gray; } .btn-slide{ background: gray; width: 120px; height: 30px; text-align: center; margin: 0 auto; display: block; color: #fff; text-decoration: none; padding: 10px 0 0 0; }
相关文章推荐
- js实现菜单的收起和展开
- jq与原生js实现收起展开效果
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- vue.js 实现点击展开收起动画效果
- 原生js实现新闻列表展开/收起全文功能
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
- JS+CSS实现可展开/收起的QQ在线客服悬浮代码
- js如何实现目录树形展开收缩效果(1)
- js如何实现目录树形展开收缩效果(2)
- 最简单JS实现展开收缩代码
- javascript实现文字隐藏 展开收起
- js实现展开关闭效果
- 实现展开收起DIV的功能
- JS 实现点击展开菜单
- DIV+JS实现可展开、折叠的菜单代码
- 自己写了一个展开和收起的多更能型的js效果
- js实现div滑动收起效果
- 用js实现图片展开的效果
- JS实现鼠标点击展开/隐藏表格行
- JS实现的展开隐藏效果