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 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
canvas实现图像放大镜
Feb 06 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
详解a++和++a的区别
2017/08/30 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python创建n行m列数组示例
2019/12/02 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
python 发送get请求接口详解
2020/11/17 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
2014年“四风”问题个人整改措施
2014/09/17 职场文书
公务员年度个人总结
2015/02/12 职场文书
小学体育课教学反思
2016/02/16 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Python 装饰器(decorator)常用的创建方式及解析
2022/04/24 Python