js写的一个简单的手风琴菜单
1 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
outline: 1px white solid;
}
#out{
width: 300px;
height: 360px;
position: absolute;
left :200px;
top:100px;
}
.menu{
width: 300px;
height: 30px;
background-color:dodgerblue;
text-align: center;
line-height: 30px;
}
.content{
height: 90px;
display: none;
}
ul{
list-style: none;
}
li{
width: 300px;
height: 30px;
outline: 1px blue solid;
background-color: aqua;
text-align: center;
line-height: 30px;
}
.menu:hover{
background-color:mediumblue;
cursor: pointer;
}
li:hover{
background-color: aquamarine;
cursor: pointer;
} </style> <script type="text/javascript">
//兼容函数
function getNodeClassName(className){
var array=[];
if(document.all){
var node=document.getElementsByClassName("*");
for(var i=0;i<node.length;i++){
if(node[i].className==className){
array.push(node[i]);
}
}
}else{
array=document.getElementsByClassName(className);
}
return array;
} //兼容函数
function getNode(obj){
var node=obj.nextSibling;
if(node.nodeType==3 && /^\s+$/.test(node.nodeValue)){
node = node.nextSibling;
}
return node;
} //兼容函数
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
} window.onload=function(){
var menu=getNodeClassName('menu');
for(var i=0;i<menu.length;i++){
menu[i].onclick=function(){
var node=getNode(this);
var dis=getStyle(node,'display');
if(dis=='block'){
node.style.display='none';
}else{
node.style.display='block';
} }
} }
</script>
</head>
<body>
<div id="out">
<div class="menu">java</div>
<div class="content">
<ul>
<li>封装</li>
<li>继承</li>
<li>多态</li>
</ul>
</div>
<div class="menu">菜单二</div>
<div class="content">
<ul>
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</div>
<div class="menu">菜单三</div>
<div class="content">
<ul>
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</div> </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
outline: 1px white solid;
}
#out{
width: 300px;
height: 360px;
position: absolute;
left :200px;
top:100px;
}
.menu{
width: 300px;
height: 30px;
background-color:dodgerblue;
text-align: center;
line-height: 30px;
}
.content{
height: 90px;
display: none;
}
ul{
list-style: none;
}
li{
width: 300px;
height: 30px;
outline: 1px blue solid;
background-color: aqua;
text-align: center;
line-height: 30px;
}
.menu:hover{
background-color:mediumblue;
cursor: pointer;
}
li:hover{
background-color: aquamarine;
cursor: pointer;
} </style> <script type="text/javascript">
//兼容函数
function getNodeClassName(className){
var array=[];
if(document.all){
var node=document.getElementsByClassName("*");
for(var i=0;i<node.length;i++){
if(node[i].className==className){
array.push(node[i]);
}
}
}else{
array=document.getElementsByClassName(className);
}
return array;
} //兼容函数
function getNode(obj){
var node=obj.nextSibling;
if(node.nodeType==3 && /^\s+$/.test(node.nodeValue)){
node = node.nextSibling;
}
return node;
} //兼容函数
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
} window.onload=function(){
var menu=getNodeClassName('menu');
for(var i=0;i<menu.length;i++){
menu[i].onclick=function(){
var node=getNode(this);
var dis=getStyle(node,'display');
if(dis=='block'){
node.style.display='none';
}else{
node.style.display='block';
} }
} }
</script>
</head>
<body>
<div id="out">
<div class="menu">java</div>
<div class="content">
<ul>
<li>封装</li>
<li>继承</li>
<li>多态</li>
</ul>
</div>
<div class="menu">菜单二</div>
<div class="content">
<ul>
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</div>
<div class="menu">菜单三</div>
<div class="content">
<ul>
<li>子菜单一</li>
<li>子菜单二</li>
<li>子菜单三</li>
</ul>
</div> </div>
</body>
</html>
js写的一个简单的手风琴菜单的更多相关文章
- 原生js写的一个简单slider
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用JS写的一个简单的时钟
没什么技术含量,单纯的想传上去.手痒了 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- 只是一个用EF写的一个简单的分页方法而已
只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...
- 写了一个简单的CGI Server
之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...
- 自己写的一个简单PHP采集器
自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...
- 写了一个简单可用的IOC
根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录 只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...
- 写了一个简单的 Mybatis
写了一个简单的 Mybatis,取名 SimpleMybatis . 具备增删改查的基本功能,后续还要添加剩下的基本数据类型和Java集合类型的处理. 脑图中有完整的源码和测试的地址 http://n ...
- 用vue.js写的一个瀑布流的组件
用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402
随机推荐
- AngularJS 模块及provide
一.模块 模块是一些功能的集合,如控制器.服务.过滤器.指令等子元素组成的整体. 1.注册和使用 模块相当于是一个注册表,保存着名字和编程元素的对照表,可存入也可取出. angular.module( ...
- Swift可向上滑移出界面的欢迎页简单封装
使用: -(WelcomView*)welcomeView{ if (!_welcomeView) { _welcomeView = [[NSBundle mainBundle] loadNibNam ...
- UWP Button添加圆角阴影（一）
原文:UWP Button添加圆角阴影(一) 众所周知,17763之前的UWP控件,大部分是没有圆角属性的:而阴影也只有17763中的ThemeShadow可以直接在xaml中使用,之前的版本只能用D ...
- Regular Expression
It's a very elegant summary of regular expression from The AWK Programming Language. 1. The regular ...
- MariaDB 单表查询与聚合(5)
MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可MariaDB的目的是完全兼容MySQL,包括API和命令行,MySQL由于现在闭源了,而能轻松成为MySQ ...
- BZOJ 5281--[Usaco2018 Open]Talent Show（分数规划&单调队列&DP）
5281: [Usaco2018 Open]Talent Show Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 79 Solved: 58[Sub ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- mysql多列索引
1,数据库每次查询只能使用一个索引 2,假设数据 表T (a,b,c) rowid 为物理位置rowid a b c(1) 1 1 1(2) 2 1 13(3) 2 2 14(4) 1 3 3(5) ...
- 解决linux下source /etc/profile关闭终端失效问题
本来想配置环境变量的,看网上和博客上很多说改/etc/profile,然后source /etc/profile之后就可以永久保存使环境变量生效,但是终端一关闭,就环境变量就失效了,其他终端也用不了. ...
- centos7----pstree
centos 默认没有pstree 安装 yum -y install psmisc