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 相关文章推荐
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
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 session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
深入分析Javascript事件代理
2016/01/30 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python 异常处理的实例详解
2017/09/11 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
家庭教育的心得体会
2014/09/01 职场文书
英文道歉信
2015/01/20 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL