jQuery事件 - toggle() 方法

最新推荐文章于 2019-08-11 18:35:02 发布

baoci1909

最新推荐文章于 2019-08-11 18:35:02 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ibingbing/p/6484938.html

本文详细介绍了使用jQuery进行元素显示和隐藏的各种技巧，包括切换元素的显示与隐藏状态、向Toggle事件绑定多个函数、切换Hide()和Show()方法，以及使用toggle()方法。通过实例展示了如何实现这些功能，如切换背景色、控制元素显示隐藏等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、切换元素的显示与隐藏状态

实例

切换 <p> 元素的显示与隐藏状态：

$(".btn1").click(function(){
  $("p").hide();
});

亲自试一试

定义和用法

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

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

语法

$(selector).toggle(speed,callback,switch)
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2、向Toggle事件绑定两个或更多函数（至少两个）

当指定元素被点击时，在两个或多个函数之间轮流切换。

如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。例如，如果存在三个函数，则第一次点击将调用第一个函数，第二次点击调用第二个函数，第三次点击调用第三个函数。第四次点击再次调用第一个函数，以此类推。

实例

切换不同的背景色：

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);
亲自试一试

语法

$(selector).toggle(function1(),function2(),functionN(),...)

亲自试一试

3、切换 Hide() 和 Show()

检查每个元素是否可见。

如果元素已隐藏，则运行 show()。如果元素可见，则元素 hide()。这样就可以创造切换效果。

代码：

$("#btn").toggle(function(){
      //控制box隐藏
      $("#box").hide();
},function(){ //控制box显示 $("#box").show(); });

4、jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

亲自试一试

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$("button").click(function(){
  $("p").hide(1000);
});

亲自试一试

5、jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){
  $("p").toggle();
});

亲自试一试

综上，这两种方法实现的效果是一样的：

$("#circle1").toggle(
function(){
$("#show_yes").show(1000);},
function(){
$("#show_yes").hide("fast");}
);

和

$("#circle1").click(function(){

$("#show_yes").toggle(1000);

});

转载于:https://www.cnblogs.com/ibingbing/p/6484938.html