jQuery toggle()方法用于显示或者隐藏元素，它是介于show()和hide()方法之间的方法。

如果元素被隐藏了，执行该方法则显示。

如果元素是显示，执行该方法则被隐藏。

语法

$(selector).toggle();
$(selector).toggle(speed, callback);
$(selector).toggle(speed, easing, callback);
$(selector).toggle(display);

参数

  • speed:可选参数。它指定显示或隐藏元素的速度。它可能的值是slow、normal、fast和毫秒。
  • easing:可选参数指定用于过渡的缓动函数。linear表示匀速移动，swing表示在开头/结尾移动慢，在中间移动快
  • callback:可选参数。回调函数，其中回调函数是在显示或隐藏完成之后执行。
  • display：如果为 true，则显示元素。如果为 false，则隐藏元素。

例子

介绍jQuery toggle()方法的例子：

<!DOCTYPE html>  
<html>  
<title>jQuery toggle()方法-yxjc123.com</title>
<head>  
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("div.d1").toggle(200);  
    });  
});  
</script>  
</head>  
<body>
<button>toggle()方法</button>
<div class="d1" style="border:1px black;padding:10px;width:250px">
<p>点击上面的按钮看看效果<br>
	如果是显示则隐藏<br>
	如果是隐藏则显示
</p>
</div>
</body>  
</html>
效果：

jquery toggle()方法