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

So, here's the thing, I followed this guide to make a drop down menu http://matthewjamestaylor.com/blog/centered-dropdown-menus

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

The main difference is that I gave an specific ID to each menu entry:

主要区别在于我为每个菜单条目提供了一个特定的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>                              

That way I can set different parameters for the drop down animation height:

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

$("#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'})
});

Here's the problem, different users will have different views of the this particular menu, meaning that the number of items on the <li> element will vary a little. It seems that I could count the number of entries ( jQuery: Count number of list elements? )

这是问题,不同的用户将对此特定菜单有不同的视图,这意味着

元素上的项目数量会有所不同。看来我可以计算条目数(jQuery:列表元素的计数?)

So my solution was to var admHeight = $("#adm li").length * 30 and then use said variable to set the height.

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

The actual page is a mix of JS and Java -since it's necessary to check what the user should see on the front page. But I think that as long as the JS scipt ran after the page was loaded, I shouldn't have any problems.

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

Is this a bad solution? Is this a valid solution? Am I missing some more obvious way of doing this?

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

Should I do this?

我应该这样做吗?

1 个解决方案

#1

I think that this: http://api.jquery.com/slidedown/ can achieve what you want to do.

我认为这个:http://api.jquery.com/slidedown/可以实现你想做的事情。

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

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