js实现可折叠展开的手风琴菜单效果


Posted in Javascript onSeptember 07, 2015

本文实例讲述了js实现可折叠展开的手风琴菜单效果。分享给大家供大家参考。具体如下:

这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢。

运行效果截图如下:

js实现可折叠展开的手风琴菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>折叠展开的菜单</title>
</head>
<body><style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
</script>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
- <a href="#">What's New</a><br>
- <a href="#">What's hot</a><br>
- <a href="#">Revised Scripts</a><br>
- <a href="#">More Zone</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="#">Usage Terms</a><br>
- <a href="#">DHTML FAQs</a><br>
- <a href="#">Scripts FAQs</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="#">Coding Forums</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="https://3water.com">三水点靠木</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
</span>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
原生JS实现美图瀑布流布局赏析
Sep 07 #Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 #Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 #Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 #Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 #Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 #Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 #Javascript
You might like
给初学PHP的5个入手程序
2006/11/23 PHP
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
pandas通过索引进行排序的示例
2018/11/16 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
《从现在开始》教学反思
2014/04/15 职场文书
单位承诺书格式
2014/05/21 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
民事答辩状格式范文
2015/05/21 职场文书
python如何进行基准测试
2021/04/26 Python
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript