0

こんにちは、この機能を切り替えることができません。すぐに機能しますが、その後フェードアップします。それから私を助けてください.....

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

    });
4

2 に答える 2

0

クリック コールバック内でクリック ハンドラをバインドしています...

これにより、 をクリックするたびに別のイベントがバインドされます.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");
    });
于 2013-06-06T07:35:04.797 に答える