jquery - jQuery切换动画与类冲突

Question

嗨，我无法切换此功能，它可以立即工作，但之后会淡出。帮我摆脱它......

$(".toggle_btn a").click (function() {

        $(".toggle_btn").addClass("toggle_btn_active");  
        $("#left_content").animate({width:"270px"},150);
        $("#main_container").animate({"margin-left":"280px"},150);
        $(".left_navigation").removeClass("sml");

        $(".toggle_btn_active a").click (function() {
            $(".toggle_btn").removeClass("toggle_btn_active");  
            $("#left_content").animate({width:"60px"},150);
            $("#main_container").animate({"margin-left":"70px"},150);
            $(".left_navigation").addClass("sml");
        });

    });

Answer 1

尝试

$(".toggle_btn a").click (function() {
    $(".toggle_btn").addClass("toggle_btn_active");  
    $("#left_content").animate({width:"270px"},150);
    $("#main_container").animate({"margin-left":"280px"},150);
    $(".left_navigation").removeClass("sml");
});

$(document).on ('click', ".toggle_btn_active a", function() {
    $(".toggle_btn").removeClass("toggle_btn_active");  
    $("#left_content").animate({width:"60px"},150);
    $("#main_container").animate({"margin-left":"70px"},150);
    $(".left_navigation").addClass("sml");
});

Answer 2

您正在单击回调中绑定单击处理程序...

这样做是每次单击时绑定另一个事件.toggle_btn a。即，如果您单击它 3 次，您将绑定 3 个.toggle_btn_active a处理程序。

您应该分离绑定并使用jQuery.on方法绑定它们，该方法允许您将事件绑定到 dom 中尚不存在的元素。

为此，您需要将事件绑定到您正在更改的元素的现有父级。

    $(".parent").on('click', '.toggle_btn a',function() {
        $(".toggle_btn").addClass("toggle_btn_active");  
        $("#left_content").animate({width:"270px"},150);
        $("#main_container").animate({"margin-left":"280px"},150);
        $(".left_navigation").removeClass("sml");
    });
    $(".parent").on('click', '.toggle_btn_active a',function() {
        $(".toggle_btn").removeClass("toggle_btn_active");  
        $("#left_content").animate({width:"60px"},150);
        $("#main_container").animate({"margin-left":"70px"},150);
        $(".left_navigation").addClass("sml");
    });