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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JS定时器实例详细分析
Oct 11 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
一道关于php变量引用的面试题
2010/08/08 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
DOM事件探秘篇
2017/02/15 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
pandas分批读取大数据集教程
2020/06/06 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
策划助理岗位职责
2013/11/18 职场文书
合作协议书范本
2014/04/17 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
员工自我工作评价
2015/03/06 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年消防工作总结
2015/04/24 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
费城故事观后感
2015/06/10 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
学习党史心得体会2016
2016/01/23 职场文书
python tkinter模块的简单使用
2021/04/07 Python