實現平滑切換的div

我試圖重新創建此頁面上的「分區切換」的效果，但使用jQuery：實現平滑切換的div

cordon-bleu.se

我想要這個效果，但像上面的頁面工作：

sohtanaka.com/web-design/easy-toggle-jquery-tutorial/

我的JavaScript到目前爲止是：

可見DIV當您單擊顯示隱藏的另一個

這些都是我想要切換的div：

<div class="menuitem active"> 
<img src="images/img_header.png" style="margin: 15px auto;"/> 
</div> 
<h2 class="menutrigger"><a href="#">Historia</a></h2> 
<div class="menuitem"> 
<p>Bla bla</p> 
<p>Bla Bla</p> 
</div> 
<h2 class="menutrigger"><a href="#">Spisar</a></h2> 
<div class="menuitem"> 
<p>Bla bla</p> 
</div>

這是我的（相關）CSS：

.menuitem { 
height: 385px; 
background-color: #000; 
display:none; 
} 

.active { 
display: block; 
}

你可以看到here它是如何工作現在。

我感謝任何幫助，我可以得到。

來源

2010-08-02 Samuel Lindblom

您是否需要重新創建它？你基本上是在創建jQuery UI Accordion :) http://jqueryui.com/demos/accordion/如果你只是做了一個很輕巧的/簡單的版本，我完全贊成它，只是讓你知道有各種手風琴已經在那裏，jQuery UI是其中之一。 – 2010-08-02 23:36:37

我同意尼克，不需要重新發明輪子。 – 2010-08-02 23:42:51

正是我想要的，但當你不知道你在找什麼和在哪裏尋找時，它不容易找到:)。謝謝！ – 2010-08-04 11:08:05

簡單的解決方案是從.active類中刪除display: block;語句，並讓jQuery通過slideToggle()處理您的顯示設置。

來源

2010-08-02 23:50:22

實現平滑切換的div

回答

相關問題