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的地址栏射击游戏代码
Mar 10 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
js 操作符汇总
Nov 08 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
js添加事件的通用方法推荐
May 15 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
vue如何使用async、await实现同步请求
Dec 09 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
博士208HAF收音机实习报告
2021/03/02 无线电
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
js获取域名的方法
2015/01/27 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python rstrip()方法实例详解
2018/11/11 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python scipy的二维图像卷积运算与图像模糊处理操作示例
2019/09/06 Python
Django之模板层的实现代码
2019/09/09 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Django nginx配置实现过程详解
2020/09/10 Python
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
英国复古服装购物网站:Collectif
2019/10/30 全球购物
医学生求职自荐信
2013/10/25 职场文书
辞职信的写法
2015/02/27 职场文书
2015年共青团工作总结
2015/05/15 职场文书