章节
问答
课签
笔记
评论
占位
占位

jQuery中显示与隐藏切换toggle方法

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

基本的操作:toggle();

这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。

  • 如果元素是最初显示,它会被隐藏
  • 如果隐藏的,它会显示出来

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

提供参数:.toggle( [duration ] [, complete ] )

同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画效果。这个元素其实就是show与hide的方法

直接定位:.toggle(display)

直接提供一个参数,指定要改变的元素的最终效果

其实就是确定是使用show还是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}


toggle方法就是show与hide的相互切换的一个快捷方法,具体使用可以参考右边的案例:

任务

?不会了怎么办
||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / XiaoKu
.left是显示的状态,默认值是inline,此时toggle函数判断得出需要执行隐藏(hide)

最新回答 / 北城慕容雪
$(".right").attr('style','display: block !important').toggle(3000)有从显示到隐藏的动画,但是$(".right").attr('style','display: block !important').show(3000)没有动画,而且最终都是隐藏,不能显示,不知道什么情况

已采纳回答 / 我要SSR
我发现很多人都不太了解“=”,“==”,“===”这三个的区别,我就简单的说一下,“=”是赋值的意思(x = 1,这里就是把1值赋给x),boolean值永远为真。“==”是等于的意思(),这里boolean值也为真,因为x和y的值相等。“===”是全等于的意思(x = 1; y = "1"; x === y),这里boolean值为假,虽然他们的值相等,但是因为x是数字类型,而y是字符串类型,所以他们是不全等于。还有就是你上面的display都没定义是什么,老师左边的方法不是JQuery方法,是js的方...

最新回答 / 沫荼
$('.right').toggle(true);$('.right').toggle(1000,false);如果设置此参数,则无法使用 speed 和 callback 参数。<==这条并不符合那个博客上面说的,但是还是有一些代码段能够执行啊我现在的问题是下面这一段代码的执行过程到底是什么样的,您的那篇博客对我的这个问题没有什么用啊$('button:last').click(function(){        // {   //不可重现        //     $('.right').t...

最新回答 / 凛MK
toggle是有三个参数的,$(selector).toggle(speed,callback,switch)switch参数应该就是所说的直接定位可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。True - 显示所有元素False - 隐藏所有元素如果设置此参数,则无法使用 speed 和 callback 参数。自我认为:就是指定要显示或者要隐藏,不会判断为显示时隐藏,判定为隐藏时显示了

最新回答 / 徐无敌
有可能是因为你设置的属性 width: 500px;  float: left; 所以看不出来

最新回答 / ergfsersdf
两种方法解决此问题  第一种  把你需要操作的button进行固定定位放在你需要的地方  第二种  mousemove换成mouseover就会只执行一次 

已采纳回答 / 橙子哥哥
这个是介绍JQ里toggle()方法的用法。如果一个Dom元素的display属性:display 等于none(不显示),就执行show()这个方法(这个方法是JQ让元素显示的方法),否则就调用hide()方法将其隐藏。$("elem")是指JQ的元素选择器,是选择要操作的Dom元素的名称。elem是element的缩写,这里无特别的意义。

最新回答 / 琢匠
e代表的是事件对象,要对事件对象操作时带上,不操作就不带

最新回答 / YeungSyuNie
我认为是jQurey用javascript的方法实现,然后封装调用。在javascript中通过获取元素的高度,然后通过for循环减小或增加元素原来的高度,从而实现hide()show().

已采纳回答 / qq_晨歌_1
因为div被设置了向左浮动(float:left)的属性,body又没设宽度,所以后面的button会浮动在div后面成一行

最赞回答 / 天街小宇
这个只是告诉你toggle内部是如何实现的,你用的时候不用管这些,直接用xx.toggle()就行了

已采纳回答 / brogii
当然结合实际情况 有的东西你想隐藏了再也不显示 你还是得用hide()

最新回答 / linsuiyuan
直接定位就是直接传入参数 true 或 false,比如 toggle(true) 或者 toggle(false),前者表示要显示,不管点击多少次都一直显示;后者表示要隐藏,不管点击多少次都要隐藏。
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言