Question

所以，就是这样，我按照本指南制作了一个下拉菜单http://matthewjamestaylor.com/blog/centered-dropdown-menus

主要区别在于我为每个菜单条目提供了一个特定的ID：

<li class="yellow" id="adm">
                <a href="#"><p class="maintext">Administration</p></a>
                <a href="0001.jsp"><p class="subtext">Info 1</p></a>
                <a href="0002.jsp"><p class="subtext">Info 2</p></a>
                <a href="0003.jsp"><p class="subtext">Info 3</p></a>
</li>
<li class="yellow" id="com">
                <a href="#"><p class="maintext">Comunication</p></a>
                <a href="0001.jsp"><p class="subtext">Info 1</p></a>
                <a href="0002.jsp"><p class="subtext">Info 2</p></a>
                <a href="0003.jsp"><p class="subtext">Info 3</p></a>
                <a href="0004.jsp"><p class="subtext">Info 4</p></a>
                <a href="0005.jsp"><p class="subtext">Info 5</p></a>  
</li>

这样我可以为下拉动画高度设置不同的参数：

$("#adm").mouseover(function(){
    $(this).stop().animate({height:'90px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

$("#com").mouseover(function(){    
    $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

这是问题，不同的用户将对此特定菜单有不同的视图，这意味着<li>元素上的项目数量会有所不同。我似乎可以计算条目数（jQuery: Count number of list elements?）

所以我的解决方案是var admHeight = $("#adm li").length * 30，然后使用所述变量设置高度。

实际页面是JS和Java的混合 - 因为有必要检查用户应该在首页上看到的内容。但我认为只要JS scipt在页面加载后运行，我就不应该有任何问题。

这是一个糟糕的解决方案吗？这是有效的解决方案吗？我错过了一些更明显的做法吗？

我应该这样做吗？

Answer 1

我认为：http://api.jquery.com/slidedown/可以实现您想要的目标。

$(".sub-menu").hide();
$( ".has-sub" ).hover(function() {
  $( this ).children(".sub-menu").slideToggle( "fast" );
});

http://jsfiddle.net/munucggq/7/

可以/我应该为下拉菜单栏设置动态高度，具体取决于它有多少项目？

1 个答案: