ホームページ > 記事 > ウェブフロントエンド > アコーディオンメニュー
アコーディオンメニュー
- 高洛峰オリジナル
- 2016-10-29 10:30:201480ブラウズ
html5 手风琴菜单
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>声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。