jQuery插件实现手风琴二级菜单 jQuery插件实现手风琴二级菜单

本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单，供大家参考，具体内容如下
HTML5结构要求：

一级菜单
二级菜单
二级菜单
二级菜单
一级菜单
二级菜单
二级菜单
二级菜单
一级菜单
二级菜单
二级菜单
二级菜单

在body末尾使用jQuery找到父标签并调用插件函数

导入accordion-css.css文件与accordion-jQuery.js文件
accordion-css.css：

*{padding: 0; margin: 0; }#accordion{width: 200px; margin: 0 auto; border: 1px solid whitesmoke; }#accordion .list1>p{padding: 10px 15px; font: 20px "微软雅黑"; font-weight: bold; background: whitesmoke; cursor: pointer; }#accordion .list1>p:hover{background: lightskyblue; }#accordion .list2>p{padding: 10px 25px; font: 15px "微软雅黑"; cursor: pointer; }#accordion .list2>p:hover{background: lightskyblue; }#accordion .list2{display: none; }

accordion-jQuery.js：

jQuery.fn.accordion = function(){var $accordion = $(this); $accordion.children().addClass("list1"); $accordion.children().children("div").addClass("list2"); $accordion.on("click",".list1>p",function(){if($(this).next(".list2").is(":visible")){$(this).next(".list2").slideUp(); }else{$(this).next(".list2").slideDown(); $(this).parent().siblings(".list1").children(".list2").slideUp(); }}); }

实现效果：