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>
一开始不想写的，但是想了一下还是随便的写一下吧。在代码的简化上也许还存在一些问题。因为我项目中是动态加载的数据，所以也就没改正。请各位包含。
最新文章
- Windows系统bug
- LeetCode-Group Anagrams
- golang的nil
- 【三分搜索算法】UVa 10385 - Duathlon
- TCA9546A
- cmd 连接到指定路径
- pureftpd的搭建
- sizeof 和 strlen
- C++不确定行为
- android学习经常使用的数据文件夹
- 201521123001《Java程序设计》第4周学习总结
- Android com.daimajia.slider.library.SliderLayout 去掉底部半透明标题背景
- 发一些Java面试题，上海尚学堂Java学员面试遇到的真题，值得学习
- Linux-基础学习（四）-部署图书管理系统项目
- java反转链表
- MySQL8.0安装连接Navicat的坑
- HDR 视频编码
- Java从零开始学三十三四(JAVA IO-流简述)
- 线性表 顺序存储 链式存储 ---java实现
- 【c#】设置Socket连接、接收超时（转）