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 相关文章推荐
删除Javascript Object中间的key
Nov 18 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
原生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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
php中isset与empty函数的困惑与用法分析
2019/07/05 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js表数据排序 sort table data
2009/02/18 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
javascript轮播图算法
2016/10/21 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
python开发中range()函数用法实例分析
2015/11/12 Python
python图片验证码生成代码
2016/07/02 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python学生管理系统开发
2019/01/30 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
详解python的super()的作用和原理
2020/10/29 Python
什么是Remote Module
2016/06/10 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
外贸业务员岗位职责
2013/11/24 职场文书
初中三好学生事迹材料
2014/01/13 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
网络营销计划书
2015/01/17 职场文书
自主招生自荐信格式
2015/03/04 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016党员入党决心书
2015/09/22 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书