2013-04-18 179 views
0

我有一個小菜單,應該展開以顯示下面的HTML,它是目前隱藏的。jQuery切換顯示/隱藏 - div顯示但不擴展

以下的jQuery:

$('.mobileMenu').click(function(e) { 
    $(this).toggleClass('arrowDown').next().slideToggle('slow'); 
}); 

這段代碼工作在this page大(點擊左邊欄的「隱藏」功能)

不過,我需要利用相同的功能,以我的菜單「移動寬度」。

如果調整您的瀏覽器降至320左右,去here,你會看到該菜單只是+菜單(位在莫smashy但工作)。點擊它,菜單會展開以顯示鏈接,首先是「在線購物」,但由於某些原因,它們隱藏/未顯示。理想情況下,綠色navigation div應擴展

回答

0

其他菜單項目需要display: block,此時只有最上面的項目有它。

+0

但它目前是「display:none;」以便完整的菜單不顯示。將它作爲display:block會使整個菜單出現並完全擊敗jQuery的目的 – Francesca

+0

在DOM元素上設置display:none會讓瀏覽器難以正確計算隱藏元素的尺寸(除非你有明確的寬度或高度設置),通常將「可見性」屬性設置爲「隱藏」會更好。但是,如果你只是在CSS類之間切換,'display:none' –

+0

應該可以正常工作。從我記得它看起來像'display:block'只被添加到一個'menu-item'中,其餘的沒有'display'屬性集。 –