Jquery中toggle方法

     在实际项目应用中，UI提供了静态页面，对toggle的方法存在一些疑问，导致在静态页面转换为动态页面的时候有点问题，于是对toggle进行了详细查阅以及了解，特写下来记录一下。

    

    定义和用法

      toggle() 方法切换元素的可见状态。

      如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

   $(selector).toggle(speed,callback,switch)

  

参数	描述
speed	可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值： 毫秒 （比如 1500） "slow" "normal" "fast" 在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。
callback	可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。
switch	可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。 True - 显示所有元素 False - 隐藏所有元素 如果设置此参数，则无法使用 speed 和 callback 参数。

在实际运用当中，如下图，在进入页面时，部分的信息需要隐藏，点击之后再展开，再点击之后，再收缩。

点击之后，如下：

初始的展开通过onclick事件产生：

<a id="spread0" name="spread0" οnclick="spread(0);" href="javascript:void(0);" class="returnback user-input-ilast active fullwidth ">展开<font class="iconfont fs16">&#xe613;</font></a>

onclick产生的方法为（比较懒散的方式）：

$("#spread"+obj).toggle(
             0,
             function(){
                var contentHtml = $("#spread"+obj).html();
                if(contentHtml.indexOf("展开") > -1){
                    $("#spread"+obj).html("收起<font class='iconfont fs16'>&#xe611;</font>");
                }else{
                    $("#spread"+obj).html("展开<font class='iconfont fs16'>&#xe613;</font>");
                }
            
                 $("#spread"+obj).show();
            }
            
        );

个人觉得在使用当中，结合静态页面以及其他的相关资源进行整合，可以更好的去处理。由于是基于别人的写法，所以再其基础上，进行修改，也需要避免修改其他的地方导致页面会出现新的问题。