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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
用jquery写的菜单从左往右滑动出现
Apr 11 Javascript
Jquery注册事件实现方法
May 18 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
Javascript的表单验证长度
Mar 16 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
react结合bootstrap实现评论功能
May 30 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
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
详解Python中的相对导入和绝对导入
2017/01/06 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
农村党支部先进事迹
2014/01/14 职场文书
出国导师推荐信
2014/01/16 职场文书
生态养殖创业计划书
2014/05/06 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电