jQuery折叠菜单

男娘i 2022-08-06 01:19 142阅读 0赞

[jQuery折叠菜单][jQuery]

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

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

--------------------

### 一、目标效果 ###

HTML代码：

![ExpandedBlockStart.gif][]

![复制代码][copycode.gif]

<body>
        <fieldset>
            <legend>Collapsible List 1</legend>
            <ul>
                <li>0 前言</li>
                <li>1 CLR的执行模型
                    <ul>
                        <li>1.1 将源代码编译成托管模块</li>
                        <li>1.4 执行程序集的代码
                            <ul>
                                <li>1.4.1 IL和验证</li>
                                <li>1.4.2 不安全的代码</li>
                            </ul>
                        </li>
                        <li>1.6 通过类型系统</li>
                    </ul>
                </li>
                <li>4 类型基础
                    <ul>
                        <li>4.1 System.Object</li>
                        <li>4.2 类型转换
                    </ul>
                </li>
                <li>5 基元类型、引用类型、值类型</li>
            </ul>
        </fieldset>
    </body>

![复制代码][copycode.gif]

> 菜单折叠及展开时的效果：
> 
> [![image][]][image 1]
> 
> [![image][image 2]][image_image 2]

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

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

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

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

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

![复制代码][copycode.gif]

$(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();
                        }
                    }
                })
            })

![复制代码][copycode.gif]

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

方案二：

![复制代码][copycode.gif]

//单击含子菜单的项
                $('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();
                    }
                })

![复制代码][copycode.gif]

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

> [![image][image 3]][image_image 3]

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

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

> 将**方案一**略作修改：
> 
> [![image][image 4]][image_image 4]

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

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

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

> 可以将方案一改为：
> 
> [![image][image 5]][image_image 5]

> 或者将方案二改为
> 
> [![image][image 6]][image_image 6]

[jQuery]: http://www.cnblogs.com/janes/archive/2011/09/02/2163925.html
[ExpandedBlockStart.gif]: /images/20220806/e3e3c90b01894eae8703e55e99ae1ef0.png
[copycode.gif]: /images/20220806/4d040f5bf0e04db087304843c47d7ee2.png
[image]: /images/20220806/b0e92da1b3ef4d67a4ca6c1a501bf345.png
[image 1]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021644248871.png
[image 2]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021644263529.png
[image_image 2]: /images/20220806/82e11c92f91e49d487cf06710b3c645f.png
[image 3]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021814004985.png
[image_image 3]: /images/20220806/436052ef441c495eb29702553312e4f5.png
[image 4]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021814014179.png
[image_image 4]: /images/20220806/c012a3ee017f40cb82cd65bea6bec41e.png
[image 5]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021814024278.png
[image_image 5]: /images/20220806/8c957661fa8644c0b8e307947db47f2b.png
[image 6]: http://images.cnblogs.com/cnblogs_com/janes/201109/201109021814021836.png
[image_image 6]: /images/20220806/7d683b9aee4f42e48a44477d92dd9bae.png