2013-04-18 125 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'属性集。 –