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");
    });

jQuery切换与类冲突的动画

2 个答案: