我可以/应该根据下拉菜单栏的项目数量为其设置动态高度

Can/Should I set a dynamic height for a drop down menu bar depending on the number of items it has?

本文关键字：项目数 设置 高度 动态 菜单栏 我可以      更新时间：2023-09-26

所以，事情是这样的，我按照本指南制作了一个下拉菜单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：计算列表元素的数量？）

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

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

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

我应该这样做吗？

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

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

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

相关文章：