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基础框架浅入剖析
Dec 27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Vue中props的详解
2019/05/16 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python zip函数打包元素实例解析
2019/12/11 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Pytorch在dataloader类中设置shuffle的随机数种子方式
2020/01/14 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
暑期实践思想汇报
2014/01/06 职场文书
商场促销活动方案
2014/02/08 职场文书
小学英语课后反思
2014/04/26 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
妇女工作先进事迹
2014/08/17 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
安全温馨提示语大全
2015/07/14 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Echarts如何重新渲染实例详解
2022/05/30 Javascript