jquery 开关

jQuery 开关实现方法

基础切换功能

使用 jQuery 的 toggle() 方法可以快速实现元素显示/隐藏的开关效果：

$("#toggleButton").click(function(){
    $("#targetElement").toggle();
});

类名切换开关

通过添加/移除 CSS 类实现样式切换：

$("#switch").click(function(){
    $(this).toggleClass("active");
    $("#content").toggleClass("show");
});

对应 CSS：

.active { background-color: #4CAF50; }
.show { display: block; }

滑动效果开关

使用滑动动画效果：

$("#slideToggle").click(function(){
    $("#panel").slideToggle("fast");
});

复选框开关

实现类似 iOS 风格的开关：

$(".switch input").change(function(){
    if($(this).is(":checked")) {
        $(".status").text("ON");
    } else {
        $(".status").text("OFF");
    }
});

自定义开关组件

创建带动画的 UI 开关：

$(".custom-switch").click(function(){
    $(this).find(".switch-handle").animate({
        left: $(this).hasClass("on") ? "0" : "50px"
    }, 200);
    $(this).toggleClass("on");
});

注意事项

• 确保 DOM 加载完成后再绑定事件
• 移动端需添加 touch 事件支持
• 复杂开关建议使用现成插件如 bootstrap-switch

这些方法可根据具体需求组合使用，实现从简单到复杂的各种开关交互效果。