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 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 *{ 8 font-family: 微软雅黑; 9 } 10 </style> 11 <script src="jquery.js"></script> 12 </head> 13 <body> 14 <h1>linux</h1> 15 <p>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!</p> 16 17 <h1>php</h1> 18 <p>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!</p> 19 </body> 20 <script> 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 }); 34 </script> 35 </html>
2、toggle实现
1 <script> 2 $('h1').click(function(){ 3 $(this).next().toggle(1000); 4 }); 5 </script>
扫一扫
5770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
