javascript - Second time clicking div closes and directly opens

Question

I'm working on a menu wich I can expand and collapse. When I click it my code works fine and collapses the div. And if I click again on my open en close div it opens fine also. But The second time doing this procces my div closes and opens directly. Can someone tell what I'm doing wrong..

$( document ).ready(function(e) {

    // Collapse and expand
    $("#collapse").click(
        function() {
            $("#information").fadeOut(200);
            $("#leftColumn").animate({width:"10px"}, 200);
            $("#collapse").html("»");

            $(this).click(function() {
                $("#information").fadeIn(200);
                $("#leftColumn").animate({width:"250px"}, 200);
                $("#collapse").html("«");

            });
        }
    );


});

Answer 1

$(document).ready(function() {
    $("#collapse").on('click', function() {
        var w = parseInt( $("#leftColumn").css('width'),10 ) > 11;
        $("#information").fadeToggle(200);
        $("#leftColumn").stop(true,true).animate({width: w ? 10 : 250}, 200);
        $("#collapse").html(w ? "»" : "«");
    });
});

Answer 2

您覆盖了第一个 onclick 函数 - 这就是为什么您必须处理您的展开/折叠有点不同的原因。这个变体只是简单地添加和删除一个类来决定应该使用哪个动画：

( document ).ready(function(e) {
    // Collapse and expand
    $("#collapse").click(
        function() {
            // default case
            if(!$(this).hasClass('collapsed')) {
                $(this).addClass('collapsed');
                $("#information").fadeOut(200);
                $("#leftColumn").animate({width:"10px"}, 200);
                $("#collapse").html("»");
            } else {
                // and in case it is collapsed...
                $(this).removeClass('collapsed');
                $("#information").fadeIn(200);
                $("#leftColumn").animate({width:"250px"}, 200);
                $("#collapse").html("«");
            }
        }
    );
});

Answer 3

尝试这个，

var toggle=0;
$("#collapse").click(function() {
    if(toggle==1){
        $("#information").fadeIn(200);
        $("#leftColumn").animate({width:"250px"}, 200);
        $("#collapse").html("«");
        toggle=0;
    }
    else
    {
        $("#information").fadeOut(200);
        $("#leftColumn").animate({width:"10px"}, 200);
        $("#collapse").html("»");
        toggle=1;
    }
});