Home > Web Front-end > JS Tutorial > jQuery Learning 6 Functions to Manipulate the Display Effect of Elements_jquery

jQuery Learning 6 Functions to Manipulate the Display Effect of Elements_jquery

WBOY
Release: 2016-05-16 18:35:16
Original
1325 people have browsed it
复制代码 代码如下:




Collapsible List — Take 1







Collapsible List — Take 1

  • Item 1

  • Item 2


  • Item 3

    • Item 3.1


    • Item 3.2

      • Item 3.2.1

      • Item 3.2.2

      • Item 3.2.3



    • Item 3.3




  • Item 4

    • Item 4.1


    • Item 4.2

      • Item 4.2.1

      • Item 4.2.2





  • Item 5








上面实现列表的折叠已经很简单了,但jQuery提供了一个切换元素状态的函数toggle()。将上面红色字体的代码改为下面的代码,同样可以实现上述功能:
$(this).children().toggle();
$(this).css('list-style-image',
($(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
}
以上三个函数show()、hide()、toggle()在带参数的情况下可以实现元素逐渐的显示和隐藏
hide(speed,callback)
show(speed,callback)
toggle(speed,callback)
speed:可为数字或字符串,把效果的持续时间(可选)指定为毫秒数或预定义的字符串之一:slow、normal或fast。如果省略,就不产生动画并立即在显示屏上显示元素。
callback:回调函数(可选),在动画完成时调用。没有参数传递给这个函数,但函数上下文(this)被设置为以动画隐藏的元素。

动画效果的可折叠列表
复制代码 代码如下:




Collapsible List — Take 3







Collapsible List — Take 3

  • Item 1

  • Item 2


  • Item 3

    • Item 3.1


    • Item 3.2

      • Item 3.2.1

      • Item 3.2.2

      • Item 3.2.3



    • Item 3.3




  • Item 4

    • Item 4.1


    • Item 4.2

      • Item 4.2.1

      • Item 4.2.2





  • Item 5





Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template