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
随机推荐
- kafka讲解
转载http://www.jasongj.com/2015/01/02/Kafka深度解析 Kafka是Apache下的一个子项目,是一个高性能跨语言分布式发布/订阅消息队列系统,而Jafka是在Ka ...
- VS IDE 中Visual C++ 中的项目属性配置
VS IDE 中Visual C++ 中的项目属性配置 一. Visual C++ 项目系统基于 MSBuild. 虽然可以直接在命令行上编辑 XML 项目文件和属性表,我们仍建议你使用 VS IDE ...
- VIM 实现tab标签页及分屏，切换命令
1,在一个窗口中,VIM 的小tab标签页命令: :tabnew [++opt选项] ［+cmd］ 文件 建立对指定文件新的tab :tabc 关闭当前的tab ...
- .NET Entity Framework (with Oracle ODP.NET) -Code First
上一篇文章介绍了.NET Entity Framework ,并演示了Model First模式,本文将继续讨论 Code First 模式的实现. 一.摘要 1.目标 本文验证了通过Oracle D ...
- 【转】「Chris Richardson 微服务系列」微服务架构的优势与不足
Posted on 2016年5月4日 编者的话|本文来自 Nginx 官方博客,是微服务系列文章的第一篇,主要探讨了传统的单体式应用的不足,以及微服务架构的优势与挑战. 作者介绍:Chris Ric ...
- 【转】基于Token的WEB后台认证机制
原谅地址:http://www.cnblogs.com/xiekeli/p/5607107.html 几种常用的认证机制 HTTP Basic Auth HTTP Basic Auth简单点说明就是每 ...
- 微服务统一登陆认证怎么做？JWT ？
无状态登录原理 1.1.什么是有状态? 有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,典型的设计如tomcat中的session. 例如登录:用户登 ...
- 深度学习：浅谈RNN、LSTM+Kreas实现与应用
主要针对RNN与LSTM的结构及其原理进行详细的介绍,了解什么是RNN,RNN的1对N.N对1的结构,什么是LSTM,以及LSTM中的三门(input.ouput.forget),后续将利用深度学习框 ...
- spring cloud学习(三) 断路器
在Spring Cloud中使用了Hystrix 来实现断路器的功能.Hystrix是Netflix开源的微服务框架套件之一,该框架目标在于通过控制那些访问远程系统.服务和第三方库的节点,从而对延迟和 ...
- ubuntu下nodejs源码安装
1.从github选择下载自己要安装的nodejs版本,https://github.com/nodejs/node/releases,我下载的版本是node-9.11.2.tar.gz 2.解压no ...