jquery 切换

jQuery 切换操作

jQuery 提供了多种切换元素状态的方法，包括显示/隐藏、类切换、属性切换等。以下是常见的切换操作实现方式：

显示与隐藏切换

使用 toggle() 方法可以切换元素的显示和隐藏状态：

$("#element").toggle();

该方法会自动判断当前元素的显示状态并执行相反操作。

滑动效果切换

slideToggle() 方法通过高度变化实现滑动效果的切换：

$("#element").slideToggle();

元素会以滑动动画形式展开或收起。

淡入淡出切换

fadeToggle() 方法通过透明度变化实现淡入淡出效果：

$("#element").fadeToggle();

类名切换

toggleClass() 方法可以动态添加或移除 CSS 类：

$("#element").toggleClass("active");

如果元素已包含该类则移除，否则添加。

属性切换

使用 prop() 方法可以切换布尔属性值：

$("#checkbox").prop("checked", function(i, val) {
    return !val;
});

多状态切换

通过回调函数可以实现更复杂的切换逻辑：

$("#button").click(function() {
    $(this).text(function(i, text) {
        return text === "ON" ? "OFF" : "ON";
    });
});

注意事项

• 切换方法大多支持速度参数（如"slow"、"fast"或毫秒数）
• 动画效果方法可以添加回调函数
• 切换类名时支持多个类名空格分隔
• 新版 jQuery 推荐使用 prop() 而非 attr() 处理布尔属性

这些方法可以组合使用实现复杂的交互效果，建议根据具体需求选择最适合的切换方式。