jquery的accordion的使用非常简单,只需要给它一个固定格式的ul即可。。。好像是句废话。。。
那么如何实现呢?请看下面(小明同学别低头。。。)
jquery-2.1.0.min.js
scriptbreaker-multiple-accordion-1.js
按顺序引用上面的两条js
然后给出一个指定格式的ul 如下
< ul class="topnav">
<li>
<a href="#">阿里巴巴
< /a>
<ul class="child_ul">
<li class="child_ul_li" name="电商平台" id="2">
<a href="#">电商平台</a>
<ul class="child_ul">
<li class="child_ul_li" name="淘宝商城" id="3">
<a href="#">淘宝商城
< /a>
<ul class="child_ul">
<li class="li_child_ul_li" name="天猫超市" id="4">
<a href="#">天猫超市</a></li>
<li class="li_child_ul_li" name="个人店铺" id="5">
<a href="#">个人店铺</a></li>
</ul>
</li>
</ul>
</li>
<li class="child_ul_li" name="支付平台" id="6">
<a href="#">支付平台</a>
<ul class="child_ul">
<li class="li_child_ul_li" name="支付宝" id="21">
<a href="#">支付宝
< /a></li>
</ul>
</li>
<li class="child_ul_li" name="音乐平台" id="7">
<a href="#">音乐平台
< /a>
<ul class="child_ul">
<li class="li_child_ul_li" name="虾米音乐" id="8">
<a href="#">虾米音乐</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">腾讯科技</a>
<ul class="child_ul">
<li class="child_ul_li" name="游戏平台" id="10">
<a href="#">游戏平台
< /a>
<ul class="child_ul">
<li class="li_child_ul_li" name="英雄联盟" id="11">
<a href="#">英雄联盟</a></li>
<li class="li_child_ul_li" name="地下城与勇士" id="12">
<a href="#">地下城与勇士</a></li>
<li class="li_child_ul_li" name="穿越火线" id="13">
<a href="#">穿越火线</a></li>
</ul>
</li>
<li class="child_ul_li" name="聊天平台" id="14">
<a href="#">聊天平台</a>
<ul class="child_ul">
<li class="li_child_ul_li" name="腾讯QQ" id="15">
<a href="#">腾讯QQ
< /a></li>
<li class="child_ul_li" name="微信" id="16">
<a href="#">微信
< /a>
<ul class="child_ul">
<li class="li_child_ul_li" name="个人微信" id="17">
<a href="#">个人微信</a></li>
<li class="li_child_ul_li" name="企业微信" id="18">
<a href="#">企业微信</a></li>
</ul>
</li>
</ul>
</li>
<li class="child_ul_li" name="音乐平台" id="19">
<a href="#">音乐平台</a>
<ul class="child_ul">
<li class="li_child_ul_li" name="QQ音乐" id="20">
<a href="#">QQ音乐
< /a></li>
</ul>
</li>
</ul>
</li>
</ul>/
上面格式是我在后台递归好的一条html ul布局
<script type="text/javascript">
$(function(){
$(".topnav").accordion({
fillSpace : true,
accordion : true,
speed : 500,
closedSign : '[+]',
openedSign : '[-]'
})
})
</script>
用一级ul的属性.accordion即可
如果是用ajax请求的后台数据 那么用下面做法
这是我在项目中的做法
<div id="accordion">
这里是ul菜单展示区域
</div>
<script type="text/javascript">
var path = "${pageContext.request.contextPath}";//获取到项目名称绝对路径
$(function(){
$.ajax({
url:path+'/menu/getMenu.do',
type:'post',
success:function(data){
$("#accordion").html(data).accordion({
fillSpace : true,
accordion : true,
speed : 500,
closedSign : '[+]',
openedSign : '[-]'
})
menuClick();//这里是菜单树点击事件
},
error:function(){
layer.msg("菜单初始化失败,请联系后台码农!",{
time:5000//5秒钟自动关闭
});
}
})
})
</script>
这里是效果图 (css太多了就不给出了) 效果很不错 但是本人不会制作动态图 所以将就看吧