要实现折叠式菜单，代码相当简单，如下所示：
二、jQuery代码分析
jQuery的代码也很简单，只有短短的几行：
$(function(){$("ul.accordionlispan").on('click',function(){$(this).parent().siblings().removeClass('selected').find('div').hide();$(this).parent().addClass('selected');$(this).next().slideDown(500);});});我们来分析一下。
首先，通过jQuery的选择器"ul.accordionlispan"指定在菜单项的标题上点击，可以折叠菜单。
click事件处理函数的第一行代码做了两件事，一个是将其它菜单项的selected样式移除，另一个是将其它菜单项的div（包括其中的子菜单）隐藏起来。$(this).parent即span的上一级，即li。.siblings()查找它的兄弟元素，并使用链式调用首先移除其selected样式，再查找其中的div并隐藏。
第二行代码为当前点击菜单添加selected样式。
三、CSS代码分析
这个折叠菜单的HTML代码和jQuery代码本身都相当简单，但CSS代码相对较长：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。