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 相关文章推荐
$.format,jquery.format 使用说明
Jul 13 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
javascript匿名函数中的'return function()'作用
Oct 15 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 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
function.inc.php超越php
2006/12/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP之预定义接口详解
2015/07/29 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
2007/04/20 Javascript
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
详解Django中Request对象的相关用法
2015/07/17 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
在keras里实现自定义上采样层
2020/06/28 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
五好党支部事迹材料
2014/02/06 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
丧事答谢词大全
2015/09/30 职场文书
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers