toggle()方法主要有两个功能，一是用于绑定两个或多个事件处理器函数，在元素被点击时轮流执行；二是切换元素的显隐状态，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。在jQuery 1.9中，toggle()方法的第一种使用方式被弃用。删除该机制是为了减少混淆，提高库的模块化。
实现隐藏与显示相互切换的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现隐藏与显示相互切换的效果</title>
<style>
.xs {
display: none;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function () {
var flag = 1;
$("#a1").click(function (e) {
if (flag == 1) {
// 显示div
$("#d1").removeClass("xs");
flag = 0;
} else {
// 隐藏
$("#d1").addClass("xs");
flag = 1;
}
});
});
</script>
</head>
<body style="font-size: 20px;">
<a id="a1" href="javascript:;">测试</a>
<div id="d1" class="xs">hello</div>
</body>
</html>
或者
var num = 0;
$('#a1').click(function (e) {
if (num++ % 2 == 0) {
// 显示
$("#d1").removeClass("xs");
} else {
// 隐藏
$("#d1").addClass("xs");
}
e.preventDefault(); //阻止元素的默认动作（如果存在）
});
或者
var i=true;//表示开关
$(".one .top").click(function() {
if(i){
$(".content").hide("slow");
i=false;
}else {
$(".content").show(1500);
i=true;
}
});
可以恢复函数 toggle 轮流执行事件监听器的功能
引入jQuery迁移插件
<script src="../jquery-migrate-1.4.1.js"></script>
在浏览器中运行，可以正常的轮流执行事件监听函数，不过在控制台出会多出一条警示：
JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated