使用toggle()方法进行显示隐藏

最新推荐文章于 2025-06-17 13:51:50 发布

afterrains

最新推荐文章于 2025-06-17 13:51:50 发布

阅读量6.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/happy_jijiawei/article/details/50392331

js 专栏收录该内容

107 篇文章

订阅专栏

本文介绍了jQuery的toggle()方法，用于切换元素的显示和隐藏状态。当元素可见时，toggle()会隐藏元素；反之则显示。文章强调了在toggle过程中判断元素状态不应依赖目测，而应使用is()方法检查元素是否为hidden状态。同时提到了slideToggle作为替代方案，以及如何使用回调函数来进一步控制toggle状态变化。

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

<html> 
<head> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".btn1").click(function(){ 
  $("p").toggle(); //toggle()方法进行显示隐藏交互事件，如果显示的就进行隐藏，如果是隐藏的就显示 
  }); 
  $(".btn2").toggle(2000,function(){ 
     $(".div2").toggle(); //callback
   }); 
}); 
</script> 
</head> 
<body> 
<p>This is a paragraph.</p> 
<button class="btn1">Toggle</button> 
<button class="btn2">Toggle2</button> 
<div class="div1">234</div> 
<div class="div2"  style="display:none">2345</div> 
</body> 
</html>

定义和用法

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 参数。

参数

描述

speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

True - 显示所有元素
False - 隐藏所有元素

如果设置此参数，则无法使用 speed 和 callback 参数。

提示和注释

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。

jquery toggle方法的过程中，怎么知道现在的状态是show还是hide，目测吗？肯定是不行的。正确的方法是使用is方法判断是否是hidden状态。例如：

代码如下复制代码

if($("#phpernote").is(":hidden")){
//当前是hide状态
}else{
//当前是show状态
}

上面也可以使用slideToggle代替

代码如下复制代码

$(this).slideToggle("slow",function(){
if ($(this).is(':hidden')) {
alert("hidden");
}
});

使用回调函数来进行判断当前元素是否隐藏。

重设toggle状态

代码如下复制代码

$('#toggled').toggle(fn1, fn2);
$('#clear').click(function() {
$('#toggled').unbind('click').toggle(fn1, fn2);
});

例子,鼠标单击某个按钮或某一元素时，使另一个元素隐藏和显示

jQuery中的 toggle()很简单的替我们办到了；
之前我们会用到两个按钮bnt1和btn2：

代码如下复制代码
$(".btn1").click(function(){ $("p").hide();});$(".btn2").click(function(){ $("p").show();});
使用toggle()后：直接点击就可以达到显示和隐藏效果；
$(".btn1").click(function(){ $("p").toggle();});

代码如下	复制代码
if($("#phpernote").is(":hidden")){ //当前是hide状态 }else{ //当前是show状态 }

代码如下	复制代码
$(this).slideToggle("slow",function(){ if ($(this).is(':hidden')) { alert("hidden"); } });

代码如下	复制代码
$('#toggled').toggle(fn1, fn2); $('#clear').click(function() { $('#toggled').unbind('click').toggle(fn1, fn2); });

代码如下	复制代码
$(".btn1").click(function(){ $("p").hide();});$(".btn2").click(function(){ $("p").show();}); 使用toggle()后：直接点击就可以达到显示和隐藏效果； $(".btn1").click(function(){ $("p").toggle();});