第二次點擊div關閉並直接打開

Question

我正在做一個菜單，我可以展開和摺疊。當我點擊它我的代碼工作正常，崩潰div。如果我再次點擊打開的en close div，它也會打開。但第二次這樣做會導致我的div關閉並直接打開。誰能告訴我我做錯了什麼..

 

$(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

試試這個，

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

Answer 2

$(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 3

您覆蓋第一的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("«"); 
      } 
     } 
    ); 
});