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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
vue登录路由验证的实现
Dec 13 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 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文件上传表单摘自drupal的代码
2011/02/15 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python中的包和模块实例
2014/11/22 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python异常处理和日志处理方式
2019/12/24 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
环保倡议书格式范文
2014/05/14 职场文书
教师考核鉴定意见
2015/06/05 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
解析MySQL binlog
2021/06/11 MySQL
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
python神经网络Xception模型
2022/05/06 Python
Linux中各个目录的作用与内容
2022/06/28 Servers