使用jquery的accordion实现手风琴效果菜单树

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