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 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
jquery实现弹出层效果实例
May 19 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
JS实现的自定义map方法示例
May 17 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
利用php生成验证码
2017/02/23 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
javascript各种复制代码收集
2008/09/20 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python获取标准北京时间的方法
2015/03/24 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
项目总经理岗位职责
2014/02/14 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis