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之对系统的toFixed()方法的修正
May 08 Javascript
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
JavaScript实现星级评价效果
May 17 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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防注
2007/01/15 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python 如何在字符串中插入变量
2020/08/01 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
学党史心得体会
2014/09/05 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
房产电话营销开场白
2015/05/29 职场文书
新年晚会开场白
2015/05/29 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2016年春季运动会广播稿
2015/08/19 职场文书
护士医德医风心得体会
2016/01/25 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python