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

使用jquery的accordion实现手风琴效果菜单树相关推荐

Bootstrap 3: accordion menu 手风琴效果
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
jquery实现简单的手风琴效果
最近看到我看的教学视频有不少手风琴效果,我也试着写一下,当做练习. 明天我放假,就要去找工作,不知道,我的前端之路,能不能正式开始. 菜鸟起飞的机会都没有,那就尴尬了. 纯属练习: 效果如图: htm ...
jQuery实现侧边导航手风琴效果
侧导航的手风琴效果是指,点击含子层导航的父导航时,使原本隐藏的子导航显示,再次点击,子层导航又恢复隐藏,同时,同一时间只有一个父导航的子导航能够显示 $("#sidenav > li& ...
使用jQuery创建折叠式菜单（手风琴效果）
使用jQuery创建折叠式菜单(手风琴效果) 今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən]). 实现效果如下: 一.HTML代 ...
html折叠手风琴效果,jQuery制作效果超棒的手风琴折叠菜单
拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进演示图: main.js $(function(){ var tmp = null, $tit ...
精心挑选12款优秀 jQuery 手风琴效果插件和教程
当你想在有限的页面空间内展示多个内容片段的时候,手风琴(Accordion)效果就显得非常有用,它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换.借助流行的 jQuery 框架,只需很少的 ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
园子中的朋友大家好.在上一篇文章中我们,给大家介绍了 Wijmo Menu 的特性及使用方法.感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力.在这篇文章中我们将介绍 Accor ...
jQuery UI - Accordion 手风琴组件的使用
这里的例子使用 jQuery UI 1.8.6 示例效果可以看 jQuery 网站中的例子. 手风琴效果将多个内容组织到多个逻辑组中,通过选择组的标题可以展开或者收缩组中的内容,使用效果很像 Tab, ...

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

使用jquery的accordion实现手风琴效果菜单树相关推荐

最新文章

热门文章