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
随机推荐
- spark图解
导语 spark 已经成为广告.报表以及推荐系统等大数据计算场景中首选系统,因效率高,易用以及通用性越来越得到大家的青睐,我自己最近半年在接触spark以及spark streaming之后,对spa ...
- Bloom Filter 算法简介 (增加 Counting Bloom Filter 内容)
Bloom Filter的中文翻译叫做布隆过滤器,是1970年由布隆提出的.它实际上是一个很长的二进制向量和一系列随机映射函数.布隆过滤器可以用于检索一个元素是否在一个集合中.它的优点是空间效率和查询 ...
- 异步多线程 ASP.NET 同步调用异步 使用Result产生死锁
一个方法调用了async方法,要将这个方法本身设计为async. public class BlogController : Controller { public async Task<Act ...
- Strom开发配置手册
一:Storm集群搭建 1.本次开发使用的是storm0.9.3 2.Storm0.9.3集群搭建: 1)storm集群角色包含集群主节点Nimbus:集群从节点Supervisor 2)集群安装:先 ...
- 判断闰年的Java算法
判断方法 普通年能被4整除且不能被100整除的为闰年. 世纪年能被400整除的是闰年 对于数值很大的年份,这年如果能整除3200,并且能整除172800则是闰年.如172800年是闰年,86400年不 ...
- 拟物设计和Angular的实现 - Material Design
Material Design是Google最新发布的跨平台统一视觉设计语言.直接翻译是物质设计,但是我更倾向于使用"拟物设计"更为准确. 据谷歌介绍,Material Desig ...
- Android常用库和插件
下拉刷新 PullLoadMoreRecyclerView 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性.网格.瀑布流效果演示 https://github.co ...
- JS中同步显示并分割输入的数字字符串
题目比较晦涩,来张图来说明要表达的效果: 第一张图的效果就是,用户输入一个数字,上面就显示一个大层,然后显示输入的数字,并把数字用空格按照每四位分割出来.好像在建行的网上银行上面就有这种效果.第二个图 ...
- 【算法python实现】 -- 最大子序和
原题:https://leetcode-cn.com/problems/maximum-subarray/ 问题描述: 输入:[-2, 1, -3, 4, -1, 2, 1, -5, 4], 输出:6 ...
- Linux Shell脚本编程基础(11)
实际上Shell是一个命令解释器,它解释由用户输入的命令并且把它们送到内核,不仅如此,Shell有自己的编程语言用于对命令的编辑,它允许用户编写由shell命令组成的程序.Shel编程语言具有普通编程 ...