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 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
js 图片随机不定向浮动的实现代码
Jul 02 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
node.js中express-session配置项详解
May 31 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 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
图书管理程序(一)
2006/10/09 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
Use Word to Search for Files
2007/06/15 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
python GUI模拟实现计算器
2020/06/22 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
简约控的天堂:The Undone
2016/12/21 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
小学一年级学生评语
2014/04/22 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Python制作动态字符画的源码
2021/08/04 Python
MYSQL 表的全面总结
2021/11/11 MySQL