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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JavaScript流程控制(循环)
Dec 06 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数据浏览器
2006/10/09 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
js获取页面description的方法
2015/05/21 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
python中偏函数partial用法实例分析
2015/07/08 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Python for循环与getitem的关系详解
2020/01/02 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python中四舍五入的正确打开方式
2021/01/18 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
高中数学教师求职信
2013/10/30 职场文书
物流合作计划书
2014/01/10 职场文书
公司请假条范文
2014/04/11 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
教师外出学习心得体会
2016/01/18 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技