jquery - 具有相同高度的 super 菜单和 div

Question

我一直在研究一个大型菜单，除了一个设计问题外，它功能齐全。

我需要使用放置在另一个包装器中的文本来增加子菜单包装器 div。

目前我的子菜单文本出现在容器外。

jsFiddle Eaxmple和 jsfiddle Full window view

外层 div class=dropdown 嵌套 div class=dd-panel

在 fiddle 示例中，Menu One > Sub Menu Two 文本显示在带有类 dropdown 包装器的 div 外部。我希望它增长外部 div 以随着嵌套元素增长。

我尝试更改属性但没有任何效果我可能在某处做错了。

我们需要用 jquery 来做还是可以用 css。

Answer 1

作为explained on mdn , position: absolute 元素从计算其他元素( sibling 、 parent )的宽度和高度的正常流程中移除。

你的问题是你的 .dd-panel 元素是用这个属性放置的，并且不会计入它们的 .dropdown 父元素的高度。

我没有看到一个纯粹的 css 解决方案。我会将代码添加到

$(".dropdown ul li").mouseenter()

回调计算ul的高度，显示的.dd-panel的高度，并设置.dropdown的高度为这两者的最大值。

[edit] 由于某些我尚未确定的原因，.dd-panel 元素在使用 $().height 时不会返回其真实高度()。使用 fiddle ，您可以从 .media-caption 节点获得“正确”的高度。

fiddle

---

对您的代码的评论:而不是

$(".dropdown ul li").each(function()
     $(this).mouseenter(function(){ ...

你可以简单地写:

$(".dropdown ul li").mouseenter(function(){ ...

或者使用事件委托(delegate):

$(".dopdown").on("mouseenter", "ul li", function(){ ...