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> ...
随机推荐
- jsp九大内置对象==欣欣
内置对象特点: 1. 由JSP规范提供,不用编写者实例化. 2. 通过Web容器实现和管理 3. 所有JSP页面均可使用 4. ...
- [转载]AMOLED结构详解，BOE专家给你分析驱动补偿
关键词: AMOLED, 驱动补偿 有机发光显示二极管(OLED)作为一种电流型发光器件已越来越多地被应用于高性能显示中.由于它自发光的特性,与LCD相比,AMOLED具有高对比度.超轻薄.可弯曲等诸 ...
- SQL Server ->> 生成时间类型的Partition Function和Partition Scheme代码
有时工作中要建个分区函数,可是像日期这种分区函数要是搞个几百个的值那不是要搞死我.于是写了点代码自动生成一个从1990年开始的按月的分区函数和对应的分区主题 USE [TestDB] GO DECLA ...
- JavaScript工作机制：V8 引擎内部机制及如何编写优化代码的5个诀窍
概述 JavaScript引擎是一个执行JavaScript代码的程序或解释器.JavaScript引擎可以被实现为标准解释器,或者实现为以某种形式将JavaScript编译为字节码的即时编译器. 下 ...
- python入门10 循环语句
两种循环: 1 for in 2 while #coding:utf-8 #/usr/bin/python """ 2018-11-03 dinghanhua 循环语句 ...
- 【牛客挑战赛30D】小A的昆特牌（组合问题抽象到二维平面）
点此看题面 大致题意: 有\(S\)张无编号的牌,可以将任意张牌锻造成\(n\)种步兵或\(m\)种弩兵中的一种,求最后步兵数量大于等于\(l\)小于等于\(r\)的方案数. 暴力式子 首先我们来考虑 ...
- [APIO/CTSC 2007]数据备份
嘟嘟嘟 这竟然是一道贪心题,然而我在不看题解之前一直以为是dp. 首先最优的配对一定是相邻两个建筑物配对,所以我们求出差分数组,就变成了在n - 1个数中选出不相邻的k个数,使这k个数的和最小. 贪心 ...
- Let’s Encrypt 最近很火的免费SSL 使用教程
2015年10月份,微博上偶然看到Let's Encrypt 推出了beta版,作为一个曾经被https虐出血的码农来说,这无疑是一个重磅消息.并且在全站Https的大趋势下,Let's Encryp ...
- WebService 之CXF(rs)之HelloWorld
1.建立mavenjava项目 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...
- 7.29NOIP模拟赛
7.29NOIP模拟赛 T1 YSG (1s,64MB,ysg.in,ysg.out) 描述 ysg,yxy,azw 三人正在刷题. 他们每做一题的时间都是一个有理数. 如果在某一时刻,三人同时做完一 ...