zoukankan      html  css  js  c++  java
  • jQuery折叠菜单

    一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点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>

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

    image       

    image

    二、最直接的切换--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参数。

    image

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

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

    方案一略作修改:

    image

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

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

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

    可以将方案一改为:

    image

    或者将方案二改为

    image

  • 相关阅读:
    webdav srs相关
    How To Configure WebDAV Access with Apache on Ubuntu 14.04
    ubuntu 编译lighttpd
    srs编译及推流测试
    Compile pciutils (lspci, setpci) in Windows x86,在 Windows x86 平台下编译 pciutils (lspci, setpci)
    mingw MSYS2 区别
    Qt之美(三):隐式共享
    Qt之美(二):元对象
    Qt之美(一):d指针/p指针详解
    C++的栈空间和堆空间
  • 原文地址:https://www.cnblogs.com/janes/p/2163925.html
Copyright © 2011-2022 走看看