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 相关文章推荐
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
Nov 12 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
Bootstrap插件全集
Jul 18 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
javascript实现时钟动画
Dec 03 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
JavaScript 序列化对象实现代码
2009/12/18 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
python正则表达式面试题解答
2020/04/28 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
美国折扣网站:jClub
2017/08/07 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
网络安全方面的面试题
2016/01/07 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
技术经理的自我评价范文
2013/12/03 职场文书
教师的实习鉴定
2013/12/15 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
导游词之襄阳古城
2019/09/27 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
python函数的两种嵌套方法使用
2022/04/02 Python