html5 手风琴菜单
因为项目需要，现在需要做个手风琴菜单，于是自己就瞎整了一下，所用只是less.js javascript jquery效果如图：
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/less">
.list{
list-style-image: url(../images/shang.png);
background:#E0E0E0;
line-height:2em
}
.list1{
list-style-type:none;
background:#E0E0E0;
line-height:2em
}
.liBox{
.list1;
.listbox{
.list;
.div1{
margin-left:20px
}
}
}
</style>
</head>
<body>
<div>
<ul>
<li id="liBox" class="liBox">
<ul>
<li id="listbox" class="listbox" onclick="toggleClick(this)" >测试</li>
<div id="box" class="box" hidden>
<div onclick="test(this)">这是一个测试1</div>
<div onclick="test(this)">这是一个测试2</div>
<div onclick="test(this)">这是一个测试3</div>
<div onclick="test(this)">这是一个测试4</div>
<div onclick="test(this)">这是一个测试5</div>
<div onclick="test(this)">这是一个测试6</div>
</div>
<div hidden>
<li id="listboxC" class="listbox" onclick="toggleClick(this)">测试101</li>
<div hidden>
<div onclick="test(this)">这是一个测试1010</div>
<div onclick="test(this)">这是一个测试1011</div>
<div onclick="test(this)">这是一个测试1012</div>
<div onclick="test(this)">这是一个测试1013</div>
<div onclick="test(this)">这是一个测试1014</div>
</div>
</div>
</ul>
</li>
<li id="liBox1" class="liBox">
<ul>
<li id="listbox1" class="listbox" onclick="toggleClick(this)">测试1</li>
<div id="box" class="box" hidden>
<div onclick="test(this)">这是一个测试7</div>
<div onclick="test(this)">这是一个测试8</div>
<div onclick="test(this)">这是一个测试9</div>
<div onclick="test(this)">这是一个测试10</div>
<div onclick="test(this)">这是一个测试11</div>
<div onclick="test(this)">这是一个测试12</div>
</div>
</ul>
</li>
<li id="liBox2" class="liBox">
<ul>
<li id="listbox2" class="listbox" onclick="toggleClick(this)">测试2</li>
<div id="box" class="box" hidden>
<div onclick="test(this)">这是一个测试13</div>
<div onclick="test(this)">这是一个测试14</div>
<div onclick="test(this)">这是一个测试15</div>
<div onclick="test(this)">这是一个测试16</div>
<div onclick="test(this)">这是一个测试17</div>
<div onclick="test(this)">这是一个测试18</div>
</div>
</ul>
</li>
<li id="liBox3" class="liBox">
<ul>
<li id="listbox3" class="listbox" onclick="toggleClick(this)">测试3</li>
<div id="box" class="box" hidden>
<div onclick="test(this)">这是一个测试19</div>
<div onclick="test(this)">这是一个测试20</div>
<div onclick="test(this)">这是一个测试21</div>
<div onclick="test(this)">这是一个测试22</div>
<div onclick="test(this)">这是一个测试23</div>
<div onclick="test(this)">这是一个测试24</div>
</div>
</ul>
</li>
</ul>
</body>
</html>
<script language="JavaScript" type="text/JavaScript" src="../bootstrap/js/less.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="../bootstrap/js/jquery.min.js"></script>
<script type="text/javascript">
function toggleClick(evl){
$("#"+evl.id).nextAll().toggle();
if($("#"+evl.id).nextAll().is(":hidden")){
document.getElementById(evl.id).style.listStyleImage="url(../images/shang.png)";
} else{
if($(evl).attr("class")=="listbox"){
document.getElementById(evl.id).style.listStyleImage="url(../images/xia.png)";
}
}
}
function test(evl){
alert(evl.innerText);
}
</script>
一开始不想写的，但是想了一下还是随便的写一下吧。在代码的简化上也许还存在一些问题。因为我项目中是动态加载的数据，所以也就没改正。请各位包含。
html5 手风琴菜单的更多相关文章
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- 精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
- UIKit的手风琴菜单，单条展开和多条同时展开
这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- jQuery手风琴菜单！！！！
jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
- 如何用Mockplus快速做一个手风琴菜单？
手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器.即使是功能强大的Axure,想实现该效果也比较麻烦.但如果你对Mockplus有所了解,你一定知道,利用Mockplus的 ...
- 炫酷实用的CSS3代码垂直手风琴菜单
今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...
- Jquery UI accordion手风琴菜单
最近学习jQuery,总结了一些心得. 1.引用 <script type="text/javascript" src=jquery.js></script> ...
随机推荐
- Android自定义之流式布局
流式布局,好处就是父类布局可以自动的判断子孩子是不是需要换行,什么时候需要换行,可以做到网页版的标签的效果.今天就是简单的做了自定义的流式布局. 具体效果: 原理: 其实很简单,Measure La ...
- js 时间特效
http://example.com:1234/test.htm#part2:Hash的作用. http://www.cnblogs.com/Interkey/p/RunAsAdmin.html
- xcode选择开发者时"The Apple Developer Program License Agreement has been updated"
解决方法:进入开发者中心查看红色提示信息,同意就行
- [工作积累点滴整理]虚拟化、云计算配置规划<一>
目 录1. 服务器虚拟化的相关配置建议 11.1. 服务器的基本配置建议 11.1.1. CPU配置 11.1.2. 服务器内存配置 21.1.3. 物理网卡配置 21.1.4. 服务器磁盘配置 21 ...
- 如何将一个PDF文件里的图片批量导出
假设我有下面这个PDF文件,里面有很多图片,我想把这些图片批量导出,而不是在Adobe Acrobat Reader里一张张手动拷贝: 本文介绍一种快捷做法. 用PDF-XChange Editor打 ...
- 设计模式——外观模式(FacadePattern)
外观模式:为子系统中的一组接口提供一个一致的界面,次模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. UML图: 外观类: package com.cnblog.clarck; /** * ...
- CF873F 【Forbidden Indices】
还有这么板子的题? 和你谷上后缀自动机的板子基本一样,区别就是之后这个位置是\(0\)才计入贡献 代码 #include<iostream> #include<cstdio> ...
- react中使用react-transition-group实现动画
css动画的方式,比较局限,涉及到一些js动画的时候没法处理了.react-transition-group是react的第三方模块,借住这个模块可以更方便的实现更加复杂的动画效果 https://g ...
- 【luogu P2731 骑马修栅栏】 题解
题目链接:https://www.luogu.org/problemnew/show/P2731 这个题是欧拉回路的模板题,那么在这里给出一个hierholzer的做法. 对于求欧拉回路的问题,有Fl ...
- EJB JPQL语句查询
JPQL就是一种查询语言,具有与SQL 相类似的特征,JPQL是完全面向对象的,具备继承.多态和关联等特性,和hibernate HQL很相似. 查询语句的参数 JPQL语句支持两种方式的参数定义 ...