在网页交互中，我们经常需要用一个按钮来控制某个元素的显示与隐藏，就像灯的开关一样，按一下开，再按一下关。如果每次都要先判断元素的当前状态，再决定调用 show() 还是 hide()，代码会变得臃肿且容易出错。jQuery 的 toggle() 方是为解决这个问题而生的。
toggle() 本质上是对 show() 和 hide() 的封装。它会自动检测被选中元素的可见性：如果元素当前是隐藏的，就把它显示出来；如果元素当前是显示的，就把它隐藏掉。这种状态感知能力让你不必手动维护一个标记变量来记录元素的可见状态。
语法拆解：四种调用方式
toggle() 方法提供了比 hide() 更丰富的参数组合，其中最值得留意的是第四种——传入一个布尔值来控制显隐。
1. 无参数调用
$(selector).toggle();
元素在显示和隐藏之间瞬间切换，没有过渡动画。适合那些对交互速度要求很高、不需要视觉过渡的场景。
2. 带时长和回调
$(selector).toggle(speed, callback);
-
speed：动画持续时间，和
hide()一样，支持"slow"、"fast"或具体的毫秒数值。 -
callback：切换动画完成后触发的回调函数。
3. 带缓动函数的完整形式
$(selector).toggle(speed, easing, callback);
-
easing：缓动函数。让切换过程不再是匀速的，而是可以有加速或减速的细腻变化。同样，要使用
"swing"和"linear"之外的缓动效果，需要引入 jQuery UI 库。
4. 布尔值控制
$(selector).toggle(display);
这是 toggle() 区别于 show() 和 hide() 的一个特性。当传入 true 时，强制显示元素；传入 false 时，强制隐藏元素。这种用法在条件判断中非常简洁。
// 根据复选框是否选中，来控制一个提示面板的显示
$("#agreeCheckbox").change(function(){
var isChecked = $(this).is(":checked");
$("#tipsPanel").toggle(isChecked);
});
一个贴近实际场景的示例
下面这个例子模拟一个常见的后台管理界面场景：点击按钮展开或收起一个数据筛选面板。我们为切换加入 600 毫秒的动画时长，让交互有呼吸感。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#filterBtn").click(function(){
// 筛选面板用 600 毫秒完成滑动切换，不是瞬间的
$("#filterPanel").toggle(600, function(){
// 回调中根据面板的可见性，更新按钮的文字
if ($("#filterPanel").is(":visible")) {
$("#filterBtn").text("收起筛选");
} else {
$("#filterBtn").text("展开筛选");
}
});
});
});
</script>
<style>
#filterPanel {
display: none;
border: 1px solid #ddd;
padding: 15px;
margin-top: 10px;
background-color: #f9f9f9;
width: 300px;
}
#filterBtn {
cursor: pointer;
padding: 8px 16px;
}
</style>
</head>
<body>
<button id="filterBtn">展开筛选</button>
<div id="filterPanel">
<h4>数据筛选条件</h4>
<label>日期范围：<input type="text" placeholder="开始日期"> - <input type="text" placeholder="结束日期"></label><br><br>
<label>状态：</label>
<select>
<option>全部</option>
<option>待审核</option>
<option>已通过</option>
<option>已驳回</option>
</select>
<br><br>
<button>应用筛选</button>
</div>
</body>
</html>
这个示例中有两个值得关注的细节。其一，toggle(600) 让面板的滑入滑出有一个平滑的过程，而不是突然出现一块内容。其二，回调函数里根据元素当前是否可见来改变按钮文字，这种双向同步让界面状态始终清晰，用户不会困惑“我现在是在收起还是展开”。
toggle() 与 hide()/show() 的取舍
本节课程知识要点：toggle() 在语义上和 hide() 加 show() 的组合等价，但它在代码层面的价值在于“状态解耦”——调用 toggle() 的地方不需要知道元素当前是什么状态，它自己会处理。这让代码的逻辑分支大幅减少。
个人经验分享：在我刚学习 jQuery 效果时，习惯性地会在点击事件中写一个 if 判断，检查元素是否可见，然后分别调用 show() 或 hide()。代码大概长这样：
// 不推荐的写法：手动判断状态
if ($("#box").is(":visible")) {
$("#box").hide(400);
} else {
$("#box").show(400);
}
后来我意识到，这种写法是多余的。toggle(400) 一行就能搞定，代码更短，维护成本更低，也不容易出现判断逻辑写反而导致的 bug。现在除非有特殊的分支逻辑（比如隐藏时要做 A 操作，显示时要做不同的 B 操作），我几乎只用 toggle() 来做显隐切换。
另一个实用场景：toggle(display) 的参数形式在表单联动中非常方便。比如一个“其他”选项，选中时显示补充输入框：
$("#reasonOther").change(function(){
$("#otherDetail").toggle($(this).prop("checked"));
});
这种用法把复选框的选中状态直接映射为元素的可见性，逻辑紧凑且直观，不需要额外的条件语句。
关于 speed 参数的一个提醒：toggle() 的动画本质上是在同时改变元素的宽度、高度和透明度。如果你希望切换过程是纯滑动效果（只改变高度），那 toggle() 并不那么适用，应该改用 slideToggle()。很多人第一次用 toggle() 时期待它只有滑动，实际却看到了宽高同时变化，会觉得不合预期。理解这三种切换方法各自的动画维度差异，是避免困惑的关键。
