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

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

Document

*{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;}

window.οnlοad=function(){

// 将所有点击的标题和要显示隐藏的列表取出来

var ps = document.getElementsByTagName("p");

var uls = document.getElementsByTagName("ul");

// 遍历所有要点击的标题且给它们添加索引及绑定事件

for(var i = 0, n = ps.length; i

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";

}

// 获取点击的标题上的索引属性，根据该索引找到对应的列表

}

// 判断该列表，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来

}

Web前端

JavaScript
DIV+CSS
jQuery

后台脚本

PHP
ASP.net
JSP

前端框架

Extjs
Esspress
YUI

实例效果：

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

伸缩的菜单html,javascript伸缩菜单栏实现代码分享相关推荐

html图片轮播replace,JavaScript图片轮播代码分享
为大家分享的JavaScript图片轮播代码如下无标题文档 .img-div img{display:none;} 1 2 3 4 5 var zBase= { $id:function(id){r ...
手机开发必备技巧：javascript及CSS功能代码分享
1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不 ...
html 传参数菜单自动展开,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠隐藏此楼查看此楼效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
html5伸缩效果,【HTML5】Jquery打造竖向伸缩/展开菜单
该楼层疑似违规已被系统折叠隐藏此楼查看此楼效果图如下: jquery打造竖向伸缩/展开菜单 body { font-family: Arial; font-size: 16px; } dl { w ...
伸缩轨道_深度解析——伸缩喷漆房为什么这么受欢迎！
伸缩式喷漆房是一种环保喷漆设备,它可以在使用时,自动展开形成封闭或半封闭的环保喷漆房,不使用时收缩合拢到一处的特殊环保喷漆房设备,由于伸缩式喷漆房外观大方.简单实用且投资费用低,它在现代涂装应用中越发 ...
javascript弹出窗口代码大全（转）
转帖,用来学习的 javascript弹出窗口代码大全如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下: 1.弹启一个全屏窗口 ...
Win11右键菜单反应慢有延迟解决方法分享
Win11右键菜单反应慢有延迟解决方法分享.有用户发现电脑鼠标点击右键菜单的时候,会出现一些延迟,导致自己在使用的过程中非常难受.那么这个问题如何自己去进行解决呢?我们一起来看看详细的解决方法分享吧. ...
Techparty-广州Javascript技术专场（学习分享）
上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的. React + Redux 最佳实践主题:本次分享,主要从React/Redux相关概念及其工具链, ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...
HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页这是程序员表白 ...

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

伸缩的菜单html,javascript伸缩菜单栏实现代码分享相关推荐

最新文章

热门文章