jquery 切换

jQuery 切换操作

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

显示与隐藏切换

使用 toggle() 方法可以在显示和隐藏之间切换元素：

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

该方法可接受参数控制动画速度（如 "slow"、"fast" 或毫秒数）和回调函数。

类切换

通过 toggleClass() 动态添加或移除 CSS 类：

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

支持同时切换多个类，用空格分隔类名。

属性切换

prop() 方法可切换布尔属性（如 checked、disabled）：

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

滑动效果切换

结合 slideUp() 和 slideDown() 实现滑动效果：

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

支持速度参数和回调函数，适用于下拉菜单等场景。

淡入淡出切换

使用 fadeToggle() 实现淡入淡出效果：

$("#box").fadeToggle(500);

参数可调整动画持续时间（毫秒）。

注意事项

• 确保 DOM 加载完成后执行操作，推荐将代码放在 $(document).ready() 中。
• 频繁切换时注意性能影响，可考虑 CSS 动画替代。
• 链式调用可合并多个切换操作，如 $("#item").toggleClass("active").fadeToggle();