js实现简单的手风琴效果


Posted in Javascript onFebruary 27, 2017

效果图:

js实现简单的手风琴效果

图(1)初始图

js实现简单的手风琴效果

图(2)点击展开效果

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
<style type="text/css">
*{margin:0;padding:0;font-size:12px;list-style:none;}
.menu{margin:50px auto;width:210px;border:1px solid #ccc;}
.menu p{height:25px;line-height:25px;background:#eee;font-weight:bold;border-bottom:1px solid #ccc;text-indent:20px;cursor:pointer;}
.menu div ul{display:none;}
.menu li{height:24px;line-height:24px;text-indent:20px;}
</style>
<script type="text/javascript">
 window.onload=function(){
 var menu=document.getElementById("menu");
 var ps=menu.getElementsByTagName("p");
 var uls=menu.getElementsByTagName("ul");
 for(var i in ps){
 ps[i].id=i;
 ps[i].onclick=function(){
 var u=uls[this.id];
 if (u.style.display=='block'){
 u.style.display="none";
 }else{
 u.style.display="block";
 }
 } 
 } 
 }
</script>
</head>
<body>
 <div class="menu" id="menu">
 <div>
 <p>Web前端</p>
 <ul style="display:block">
 <li>JavaScript</li>
 <li>DIV+CSS</li>
 <li>JQuary</li>
 </ul>
 </div>
 <div>
 <p>后台脚本</p>
 <ul>
 <li>PHP</li>
 <li>ASP.net</li>
 <li>JSP</li>
 </ul>
 </div>
 <div>
 <p>前端框架</p>
 <ul>
 <li>Extjs</li>
 <li>Esspress</li>
 <li>YUI</li>
 </ul>
 </div>
 </div>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
nicejforms——美化表单不用愁
Feb 20 Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 #Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 #Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
js 调用百度分享功能
Feb 27 #Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 #Javascript
jQuery实现元素的插入
Feb 27 #Javascript
jQuery实现导航回弹效果
Feb 27 #Javascript
You might like
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
Valerio 发布了 Mootools
2006/09/23 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
JS的反射问题
2010/04/07 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jquery选择器简述
2015/08/31 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
js如何获取网页所有图片
2017/05/12 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Python标准库内置函数complex介绍
2014/11/25 Python
python getopt详解及简单实例
2016/12/30 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
设备动力科岗位职责范本
2014/02/23 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
助学贷款贫困证明
2014/09/23 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
2014年司机工作总结
2014/11/21 职场文书
交通安全教育主题班会
2015/08/12 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python