JavaScript制作的可折叠弹出式菜单示例


Posted in Javascript onApril 04, 2014
<!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=utf-8" /> 
<title>可折叠弹出式菜单</title> 
</head> 
<style> 
body {background-color: #FFF;color: #000;} 
div {margin-bottom: 10px;} 
ul.menu {display: none;list-style-type: none;margin-top: 5px;} 
a.menuLink {font-size: 16px;font-weight: bold;} 
</style> 
<script type="text/javascript"> 
window.onload = initAll; 
function initAll() { 
var allLinks = document.getElementsByTagName("a"); 
for (var i=0; i<allLinks.length; i++) { 
if (allLinks[i].className.indexOf("menuLink") > -1) { 
allLinks[i].onclick = toggleMenu; 
} 
} 
} 
function toggleMenu() { 
var startMenu = this.href.lastIndexOf("/")+1; 
var stopMenu = this.href.lastIndexOf("."); 
var thisMenuName = this.href.substring(startMenu,stopMenu); 
var thisMenu = document.getElementById(thisMenuName).style; 
if (thisMenu.display == "block") { 
thisMenu.display = "none"; 
} 
else { 
thisMenu.display = "block"; 
} 
return false; 
} 
</script> 
<body> 
<h1>Shakespeare's Plays</h1> 
<div> 
<a href="menu1.html" class="menuLink">Comdeis</a> 
<ul class="menu" id="menu1"> 
<li><a href="pg1.html">All's Well That Ends Well</a></li> 
<li><a href="pg2.html">As You Like It</a></li> 
<li><a href="pg3.html">Love's Labour's Lost</a></li> 
<li><a href="pg4.html">The Comedy of Errors</a></li> 
</ul> 
</div> 
<div> 
<a href="menu2.html" class="menuLink">Tragedies</a> 
<ul class="menu" id="menu2"> 
<li><a href="pg5.html">Anthony & Cleopatra</a></li> 
<li><a href="pg6.html">Hamlet</a></li> 
<li><a href="pg7.html">Romeo & Juliet</a></li> 
</ul> 
</div> 
<div> 
<a href="menu3.html" class="menuLink">Histories</a> 
<ul class="menu" id="menu3"> 
<li><a href="pg8.html">Henry IV, Part1</a></li> 
<li><a href="pg9.html">Henry IV, Part2</a></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
javascript动态加载二
Aug 22 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
分析JS中this引发的bug
Dec 12 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
layui radio性别单选框赋值方法
Aug 15 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 #Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 #Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 #Javascript
深入理解javascript的执行顺序
Apr 04 #Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 #Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 #Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 #Javascript
You might like
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
php反射应用示例
2014/02/25 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
商场租赁意向书
2014/07/30 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android
使用Python解决图表与画布的间距问题
2022/04/11 Python