jQuery折叠菜单

最新推荐文章于 2024-03-09 15:44:15 发布

weixin_33912246

最新推荐文章于 2024-03-09 15:44:15 发布

阅读量174

点赞数

文章标签： javascript 前端 ViewUI

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

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

一、目标效果

HTML代码：

HTML

<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>

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

二、最直接的切换--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)：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

可以将方案一改为：

或者将方案二改为

weixin_33912246

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery折叠菜单

一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。一、目标效果HTML代码：HTML&lt;body&gt; &lt;fieldset&gt; &lt;legend&gt;Collapsible List 1&lt;/le...
复制链接

扫一扫