如何在單擊鏈接時切換DIV的大小以擴展其高度？

Question

我試圖讓'頂欄'延伸來揭示一系列的鏈接。

爲此，我選擇了jQuery，並且一些研究顯示我應該切換這個。

繼操縱類的 '頂吧' 的許多失敗的事件，我已經嘗試了不同的方法 - 看：http://jsfiddle.net/SQHQ2/2408/

的HTML：

<div id='topbar'>toggle me</div> 
<a href="#" class="menu">Toggle</a> 

的CSS：

#topbar { 
    background: orange; 
    color: white; 
    height: 60px; 
    text-align:center; 
} 

jQuery：

$(".menu").click(function() { 
     $("#topbar").toggle(function() { 
      $("#topbar").animate({ 
       height: 165 
      }, 200); 
     }, function() { 
      $("#topbar").animate({ 
       height: 60 
      }, 200); 
     }); 
    }); 

當我嘗試此代碼時，它只是以動畫方式隱藏頂部欄。

您能否幫助我實現一個解決方案，點擊與'.menu'類鏈接，將頂部欄從最高點60px擴展到160px高度，以揭示隱藏鏈接？

我歡迎替代來實現的解決方案，只要他們的工作:)

在新的一年和TIA最良好的祝願。

Answer 1

另一種方法考慮的是讓所有的CSS和JavaScript分開。下面是我的意思的例子：

HTML

<div id='topbar'>toggle me</div> 
<a href="#" class="menu">Toggle</a> 

CSS

#topbar { 
    background: orange; 
    color: white; 
    text-align:center; 
} 

.short { 
    height: 60px; 
} 

.tall { 
    height: 160px; 
} 

的JavaScript

$(".menu").click(function() { 
    $('#topbar').toggleClass('short', 'tall'); 
}); 

這樣做是爲了保持你的風格在你的CSS，然後切換你想要應用的課程。

Answer 2

.toggle 

是jQuery中，上點擊切換處理程序（這就是爲什麼你的吧，當你點擊切換）

$(".menu").toggle(function() { 
    $("#topbar").animate({ 
     height: 165 
    }, 200); 
}, function() { 
    $("#topbar").animate({ 
     height: 60 
    }, 200); 
}); 

應該只是罰款。

Answer 3

$(".menu").toggle(function() { 
    $("#topbar").animate({ 
     height: 165 
    }, 200); 
}, function() { 
    $("#topbar").animate({ 
     height: 60 
    }, 200); 
}); 

Answer 4

也許你可以添加一個屬性到你的標籤來保持狀態（展開/未展開）。而不是切換隻是用它來動畫的頂欄

HTML

<div id='topbar'>toggle me</div> 
<a expanded="0" href="javascript:void(0);" class="menu">Toggle</a> 

JS

$(".menu").click(function() { 
    var thisObj = this; 
    var expanded = parseInt($(thisObj).attr("expanded")); 
    if (expanded){ 
     $("#topbar").animate({height:60},200, function(){ 
      $(thisObj).attr("expanded", "0");  
     }); 
    } else { 
     $("#topbar").animate({height:160},200, function(){ 
      $(thisObj).attr("expanded", "1"); 
     }); 
    } 
});