jQuery toggle анимация, связанная с классом

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