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
随机推荐
- 使用dbms_profiler包测试存储过程性能
原文地址 http://hi.baidu.com/edeed/blog/item/345401e9a8851d38b80e2db4.html dbms_profiler用来测试PL/SQL代码非常 ...
- spring mvc 的请求流程
SpringMVC核心处理流程: 1.DispatcherServlet前端控制器接收发过来的请求,交给HandlerMapping处理器映射器 2.HandlerMapping处理器映射器,根据请求 ...
- Linux 下建立 SSH 隧道做 Socket 代理
背景 需要解决本地访问内部集群中各台机器上的内部web服务,但是内部集群不能直接访问,只能通过edge node节点跳转. 前提:edge node可以通过ssh方式访问,在edge node上可以访 ...
- Linux下可视化空间分析工具ncdu
场景:磁盘空间占满后快速查找某个目录(子目录)占用空间大. ncdu /var (分析后按左右键查看即可)
- 如何在C#中引入CPLEX的dll（CPLEX系列-教程一）
以前写在CSDN上的文章.转到博客园之后,打算把这个教程移过来,顺便完善后面的教程.主要是在Asp.Net+EF6里面使用cplex,完成一个最优生产计划的决策.当时在查找如何在C#中引用cplex时 ...
- Aspose Word.Dll库自带的bug导致The document appears to be corrupted and cannot be loaded 问题处理。
问题的详细描述: C#在开发过程中使用Aspose.word.dll库去实现word套打功能.但是,最近客户反映出现了一个问题,在打印文档的时候,系统报错.经过定位分析发现是Aspose.word.d ...
- 操作Checkbox标签
在前端开发中,少不了对Checkbox的操作. 常用的的方法有2个:.is()和.prop()方法.前者是判断 checkbox的状态,选不是未选.而后者为checkbox设置一个值,可以设置chec ...
- word2vec的原理（一）
最近上了公司的新员工基础培训课,又对NLP重新产生的兴趣.NLP的第一步大家知道的就是不停的写正则,那个以前学的还可以就不看了.接着就是我们在把NLP的词料在传入神经网络之前的一个预处理,最经典的就是 ...
- spring cloud学习(一) 服务注册
首先spring-cloud相关的简介可以去百度搜索,这里就不多说了,这里分享一个翻译spring cloud官网的中文网站spring cloud中文网 这个学习项目的代码放在 https://gi ...
- SQL Server 用户'NT AUTHORITY\IUSR' 登录失败
今天打开网站时,突然报这个错误,平时都好好的 Cannot open database "JMECC" requested by the login. The login fail ...