Question

我创建了一个jQuery下拉菜单，显示悬停时的DIV，但我不能强制下拉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 ，查看完整代码＆amp;展开预览部分以查看问题。

谢谢！

Answer 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;
}

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

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

希望这有帮助。

Answer 2

您可以尝试将div宽度设置为窗口的宽度; （假设你在身体上隐藏了溢出-x）。

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

看看这里看看;

http://jsfiddle.net/cs3p5/

如何强制jQuery下拉到全宽？

2 个答案: