jquery-12 折叠面板如何实现（两种方法）

一、总结

一句话总结：1、根据点击次数来判断显示还是隐藏，用data方法保证每个元素一个点击次数；2、找到元素的下一个，然后toggle实现显示隐藏。

 

1、toggle的两种用法是什么？

有fn为事件切换

没有fn为显示隐藏

3     $(this).next().toggle(1000);

 

2、如何给标签添加某属性（最优）？

最优的话用data()，不会改变标签原有的属性

21 $('h1').data({ 'n':0});

 

3、如何根据点击次数来判断显示还是隐藏，用data方法保证每个元素一个点击次数？

data()方法

21 $('h1').data({ 'n':0}); 22 23 $('h1').click(function(){ 24 n=$(this).data('n'); 25 26 if(n%2==0){ 27 $(this).next().hide(1000); 28 }else{ 29 $(this).next().show(1000); 30 } 31 32 $(this).data({ 'n':n+1}); 33 });

 

4、如何找到元素的下一个，然后toggle实现显示隐藏？

next()方法找下一个

3     $(this).next().toggle(1000);

 

 

二、折叠面板如何实现（两种方法）

1、show和hide实现

1  2  3  4     
      5      6     11     12 13 14     
linux
    15     
linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!
16 17     
php
18     
php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!php is very much!
19 20 35 

2、toggle实现

1