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实现trim()的解决办法
Apr 16 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
Nov 14 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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
PHP函数in_array()使用详解
2014/08/20 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python中使用dom模块生成XML文件示例
2015/04/05 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python如何输出百分比
2020/07/31 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
仓库组长岗位职责
2014/01/29 职场文书
公司新年寄语
2014/04/04 职场文书
诚信考试倡议书
2014/04/15 职场文书
故宫导游词
2015/01/31 职场文书
企业投资意向书
2015/05/09 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang