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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
js中日期的加减法
May 06 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
js实现按座位号抽奖
Apr 05 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
详细分析Node.js 模块系统
Jun 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
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
jQuery操作css样式
2017/05/15 jQuery
最实用的JS数组函数整理
2017/12/05 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python实现简易淘宝购物
2019/11/22 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
公司中层干部的自我评价分享
2014/03/01 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
心灵点滴观后感
2015/06/02 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android