如何强制 jQuery 下拉菜单全宽？答案

【问题标题】：How to force jQuery dropdowns to full width?如何强制 jQuery 下拉菜单全宽？
【发布时间】：2014-02-18 12:20:38
【问题描述】：

我创建了一个在悬停时显示 DIV 的 jQuery 下拉菜单，但我无法强制下拉 DIV 在页面上具有 100% 的宽度。

CSS：

ul.oe_menu div{
   position:absolute;
   top:103px;
   left:1px;
   background:#fff;
   width:200; /* This sets the width of the dropdown DIV */
   height:210px;
   padding:30px;
   display:none;
}

查看 JS Fiddle 以查看完整代码并展开预览部分以查看问题。

谢谢！

【问题讨论】：

width:200; 是什么意思？

标签： javascript jquery css drop-down-menu

【解决方案1】：

这是因为如果您将 div 的宽度设置为 100%，它会占用其父级宽度的 100%（对应的li）。

对此的一种解决方案是设置 div 的位置 fixed 以便在其宽度设置为 100% 时采用页面的宽度。

ul.oe_menu div{
   position:fixed;
   top:103px;
   left:0px;
   background:#fff;
   width:100%;
   height:210px;
   display:none;
}

这样您就必须从divs 中删除left:n。 JS Fiddle here.

为了使过渡看起来更自然，您可以考虑将.slideUp(200) [JS Fiddle here] 或.animate({"opacity":0},{complete:function(){$(this).css("opacity","1")}}); [JS Fiddle here] 设置为mouseleave。

希望这会有所帮助。

【讨论】：

【解决方案2】：

可以尝试将div的宽度设置为窗口的宽度；（假设您无论如何都将溢出-x 隐藏在身体上）。

var winWidth = $(window).width();           
$this.children('div').css({zIndex:'9999',width:winWidth}).stop(true,true)....

看看这里看看；

http://jsfiddle.net/cs3p5/

【讨论】：