javascript伸缩菜单栏实现代码分享


Posted in Javascript onNovember 12, 2015

本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来。具体代码如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{margin:0;
  padding:0;
  font-size:13px;
  list-style:none;}

.menu{width:210px;
  margin:50px auto;
  border:1px solid #ccc;}

.menu p{height:25px;
  line-height:25px;
  font-weight:bold;
  background:#eee;
  border-bottom:1px solid #ccc;
  cursor:pointer;
  padding-left:5px;}

.menu div ul{display:none;}

.menu li{height:24px;
   line-height:24px;
   padding-left:5px;}
</style>
 <script type="text/javascript">
 window.onload=function(){

  // 将所有点击的标题和要显示隐藏的列表取出来
 var ps = document.getElementsByTagName("p");
 var uls = document.getElementsByTagName("ul");

  // 遍历所有要点击的标题且给它们添加索引及绑定事件
 for(var i = 0, n = ps.length; i <n; i += 1){

  ps[i].id = i;
  ps[i].onclick = function(){
   for(var j = 0; j < n ; j += 1){
    uls[j].style.display = "none";
   }
   uls[this.id].style.display = "block";
  }
  // 获取点击的标题上的索引属性,根据该索引找到对应的列表
 }
  // 判断该列表,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来
 }
 </script>
</head>
<body>
 <div class="menu" id="menu">
  <div>
   <p>Web前端</p>
   <ul style="display:block">
    <li>JavaScript</li>
    <li>DIV+CSS</li>
    <li>jQuery</li>
   </ul>
  </div>
  <div>
   <p>后台脚本</p>
   <ul>
    <li>PHP</li>
    <li>ASP.net</li>
    <li>JSP</li>
   </ul>
  </div>
  <div>
   <p>前端框架</p>
   <ul>
    <li>Extjs</li>
    <li>Esspress</li>
    <li>YUI</li>
   </ul>
  </div>
 </div>
</body>
</html>

实例效果:

javascript伸缩菜单栏实现代码分享

以上就是为大家分享的javascript伸缩菜单栏实现代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
javascript发送短信验证码实现代码
Nov 12 #Javascript
javascript倒计时效果实现
Nov 12 #Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
validator验证控件使用代码
2010/11/23 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
opencv python图像梯度实例详解
2020/02/04 Python
python3跳出一个循环的实例操作
2020/08/18 Python
建筑设计学生的自我评价
2014/01/16 职场文书
经验交流材料格式
2014/12/30 职场文书
继承公证书格式
2015/01/26 职场文书
2015年双拥工作总结
2015/04/08 职场文书
总经理聘用协议书
2015/09/21 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
python 常用的异步框架汇总整理
2021/06/18 Python