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();
            }
            
        );


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









  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

zhaozhanzhan

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者