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进行拖拽
Jul 20 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
javascript实现京东登录显示隐藏密码
Aug 02 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
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
初中音乐教学反思
2014/01/12 职场文书
运动会广播稿150字
2014/02/19 职场文书
私人委托书格式
2014/09/10 职场文书
新员工辞职信范文
2015/05/12 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书