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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
关于this和self的使用说明
Aug 01 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
JavaScript学习笔记之函数记忆
Sep 06 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python+django实现简单的文件上传
2016/08/17 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
毕业生就业自荐信
2013/12/04 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2014年护士工作总结范文
2014/11/11 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Redis如何实现分布式锁
2021/08/23 Redis
Python实现打乒乓小游戏
2021/09/25 Python