Heim > Web-Frontend > js-Tutorial > jQuery 学习6 操纵元素显示效果的函数_jquery

jQuery 学习6 操纵元素显示效果的函数_jquery

WBOY
Freigeben: 2016-05-16 18:35:16
Original
1325 Leute haben es durchsucht
复制代码 代码如下:




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





Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage