jQuery折叠菜单

一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。

这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。

一、目标效果

HTML代码：

HTML

菜单折叠及展开时的效果：

二、最直接的切换--hide()，show()，toggle（）

Hide(speed,callback):将元素display值变为none。
Show(speed,callback) ：将隐藏的相应元素变为可见。
Toggle(speed,callback) ：改变当前的显示状态，可以简化hide和show方法的轮换调用。

其实，除了以上两个例子中突然改变元素的可见性外。还可以设定speed参数，控制改变的速度，该参数可以为毫秒数或者指定字符slow,normal,fast。

1. 首先直接使用Show()和Hide方法来实现。

这个功能主要的几点：①实现子菜单的隐藏和显示控制；②改变父级菜单的+-号；③改变鼠标经过时指针形状。

     $(document).ready(function () {
//加载时隐藏子菜单
            $('li ul').hide();
//不包含子菜单时鼠标指针和项目图标
            $('li:not(:has(ul))')

.css({ 'cursor': 'default', 'list-style-image': 'none' });
//包含子菜单时鼠标指针和项目图标
            $('li:has(ul)')

.css({ 'cursor': 'pointer', 'list-style-image': 'url(plus.gif)' });
//单击含子菜单的项
            $('li:has(ul)').click(function (event) {
if (this == event.target) {
if ($(this).children().is(':hidden')) {

$(this)

.css('list-style-image', 'url(minus.gif)')

.children().show();

}
else {

$(this)

.css('list-style-image', 'url(plus.gif)')

.children().hide();

}

}

})

})

2. 更简单的切换--toggle()方法

方案二：

  //单击含子菜单的项
            $('li:has(ul)').click(function (event) {
if (this == event.target) {

$(this).css('list-style-image', ($(this).children().is(':hidden') ? 'url(minus.gif)' : 'url(plus.gif)'));

$(this).children().toggle();

}

})

3. 给切换来个限速，设置speed参数。

三、淡入淡出--FadeIn(),FadeOut()

FadeIn(speed,callback) ：将非隐藏的指定元素不透明度降为0%，然后从显示器上删除。speed为毫秒数或指定字符slow,normal,fast。callback为回调函数。
FadeOut(speed,callback)：将隐藏的指定元素的不透明度提高到初始值。参数同上。
FadeTo(speed,opacity,callback)：调整指定元素的不透明度至指定值。opacity为0-1.0之间的值。其他参数同上。

将方案一略作修改：

经过测试，FadeTo(‘slow’)和FadeTo(‘slow’,0)两个方法还是有区别的。FadeTo方法可以将元素的不透明度设置为0，但是元素所占的位置不会从屏幕上消失。

四、滑上滑下-SlideDown(),SlideUp(),SlideToggle()

SlideDown(speed,callback)：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
SlideUp(speed,callback)：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
SlideToggle(speed,callback)：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

可以将方案一改为：

或者将方案二改为

本文转自陈敬（Cathy）博客园博客，原文链接：
http://www.cnblogs.com/janes/archive/2011/09/02/2163925.html
，如需转载请自行联系原作者

一、目标效果

二、最直接的切换--hide()，show()，toggle（）

三、淡入淡出--FadeIn(),FadeOut()

四、滑上滑下-SlideDown(),SlideUp(),SlideToggle()

相关推荐