js实现简单的手风琴效果
更新时间：2017年02月27日 16:01:22 作者：我本善良
本文主要介绍了js实现简单手风琴效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧
效果图:
图（1）初始图
图（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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
在使用Easyui GridView时，如果要Gridview的宽度和窗口的宽度相同，只需要设置fitColumns: true即可,感兴趣的你不要走开啊，接下来为您详细介绍2013-01-01
这篇文章主要为大家详细介绍了JavaScript canvas仿代码流瀑布，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
第一人称视角的场景巡检主要需要解决两个问题，人物在场景中的移动和碰撞检测。移动与碰撞功能是所有三维场景首先需要解决的基本问题，今天我们就通过最基本的threejs来完成第一人称视角的场景巡检功能，感兴趣的朋友一起看看吧2022-02-02
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
这篇文章主要介绍了基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了JavaScript树形组件实现无限级树形结构，一种构建多级有序树形结构JSON（或XML）数据源的方法，下面更多相关资料需要的小伙伴可以参考一下2022-03-03
如果一个值是引用类型的，那么它的存储空间将从堆中分配。由于引用值的大小会改变，所以不能把它放在栈中，否则会降低变量查寻的速度。相反，放在变量的栈空间中的值是该对象存储在堆中的地址，这篇文章主要介绍了JS原始值和引用值 ,需要的朋友可以参考下2021-12-12
判断数据类型是JavaScript面试时常常遇到的问题，本文为大家总结了几种常用的方法，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-06-06
本篇文章主要是对js判断输入是否为中文的函数进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要为大家详细介绍了JavaScript实现简易聊天对话框，附加滚动条功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
JavaScript console对象与控制台使用示例详解
这篇文章主要介绍了JavaScript console对象与控制台的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
最新评论