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>

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

jquery生成二维码怎么添加图片（两种方法）
github项目地址: https://github.com/fengliting/erweima 注意:这里实现的是第一个方法自动生成二维码里面添加图片,有两种方法,一种是使用jquery原生的二 ...
jQuery的 $.ajax防止重复提交的两种方法(推荐)
本文给大家分享两种jquery 的ajax防止重复提交的方法,第一种方法对于onclick事件触发的ajax,在beforeSend中使点击按钮不可用,ajax结果返回后置为可用,第二种利用jquer ...
单击触发jquery.autocomplete的两种方法
jquery.autocomplete的参数 minChars设置为0时,默认要双击才会触发jquery.autocomplete,如果想要单击触发的话,得进行一定的处理才行.下面讲下我知道的单击触发 ...
php ajax jquery 表单重复提交,jQuery的 $.ajax防止重复提交的两种方法(推荐)
下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不 ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
jquery 乱码传参_jquery获取URL中参数解决中文乱码问题的两种方法
从A页面通过url传参到B页面时,解析url参数可以用下面两种方法: 方法一:正则分析法 function getQueryString(name) { var reg = new RegExp(&q ...
用两种方法判断男性女性的存储过程
昨天有一朋友问我了这个问题,题目如下:创建一个名为CheckGender的存储过程,该过程接受一个名称作为其参数并检查名称的前缀为Ms. 还是Mr.如果前缀为Ms.则显示"你输入的是女性的名 ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
VBA实现两种方法生成任意概率分布的随机数
引子一把武器的品质有分为最下级.下级.中级.上级.最上级五档,我希望在击杀一只怪物的时候,这把武器的掉率:最下级>下级>中级>上级>最上级,问如何设计满足上面的需求? 在游戏 ...

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

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

一、总结

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

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

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

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

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

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

1、show和hide实现

2、toggle实现

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

最新文章

热门文章