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太多了就不给出了) 效果很不错 但是本人不会制作动态图 所以将就看吧
