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
随机推荐
-
由Vue引发的getter和setter思考
公司的新项目决定使用Vue.js来做,当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vu ...
-
Dijkstra 最短路算法（只能计算出一条最短路径，所有路径用dfs）
上周我们介绍了神奇的只有五行的 Floyd 最短路算法,它可以方便的求得任意两点的最短路径,这称为"多源最短路".本周来来介绍指定一个点(源点)到其余各个顶点的最短路径,也叫做&q ...
-
Orchard基本概念
本文链接:http://www.cnblogs.com/souther/p/4531273.html Orchard是个CMS(这不是废话么),它的首要目标是帮助你从现有的碎片建设网站.这些碎片大小不 ...
-
Java学习之路(六)
1:包及和访问权限 将类放置到一个包当中,需要使用package “包名” 编译时需要使用 -d 参数 该参数的作用是依照包名生成相应的文件夹 一个类的全民应该是 “包名” + “.” + “类名 ...
-
IIS7多域名绑定同一物理目录，设置不同默认文档的解决方案
转载自 http://zzstudy.offcn.com/archives/6159 如何解决IIS7多域名绑定同一物理目录,设置不同的默认文档的问题? 因为在一个物理目录下只有一个web.confi ...
-
《C专家变成》之二
第五章 一.对链接的思考 目标文件并不能直接执行,它首先需要载入到链接器.链接器确认main函数为初始进入点(程序开始执行的地方),把符号引用绑定到内存地址,把所有的目标文件集中在一起,再加上库文件, ...
-
双系统下Ubuntu扩展根目录空间方法
最近,在Ubuntu16.04上装了个matlab,突然发现根目录空间只剩1G了,这哪儿够用啊,就想着有没有一种方法不用重装系统就可以扩展根目录空间呢?别说还真有,看下文. 开始之前先分出一些未分配空 ...
-
WEBBASE篇： 第九篇， JavaScript知识4
JavaScript 4 练习1 <!doctype html> <html lang="en"> <head> <meta charse ...
-
【独家】终生受用的Redis高可用技术解决方案大全
最近很多朋友向我咨询关于高可用的方案的优缺点以及如何选择合适的方案线上使用,刚好最近在给宜人贷,光大银行做企业内训的时候也详细讲过,这里我再整理发出来,供大家参考,如有不妥之处,欢迎批评指正,也欢迎推 ...
-
Python 编程快速上手 第九章 组织文件
上一章节,主要讲了如何用 Python 进行创建并写入新文件.这一章节,讲了对如何用 Python 对文件进行进一步的操作,包括: 移动,复制,删除文件 改名 压缩文件 [shutil]移动,复制,删 ...