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 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
$.extend 的一个小问题
Jun 18 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
JavaScript 的继承
2011/10/01 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python排序算法实例代码
2017/08/10 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Django web框架使用url path name详解
2019/04/29 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
T3官网:头发造型工具
2019/12/26 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
文明宿舍获奖感言
2014/02/07 职场文书
公司保密承诺书
2014/03/27 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS