Question

我正在创建一个水平ul导航栏。每个li项目的宽度不同。我想在下拉菜单中这样做，下拉“children”li项与“父”li项目的长度/宽度相同。正在考虑使用jQuery，所以它会是这样的：

jQuery("ul#menu li").width(); = jQuery("ul#menu ul li").width();

这显然不起作用，但希望能更好地了解我正在尝试做什么。谢谢你的帮助。如果只使用CSS就可以做得更好。

Answer 1

jQuery似乎是一个糟糕的解决方案。

我会为每个家长li添加一个课程。

<li class="home"><!--nest ul goes here--></li>
<li class="about"><!--nest ul goes here--></li>
<li class="products"><!--nest ul goes here--></li>

然后你可以专门针对每个人及其子女：

.home, .home ul li { width: 150px; }
.about, .about ul li { width: 220px; }
.products, .products ul li { width: 100px; }

Answer 2

我认为如果您的某个嵌套项（下拉列表）大于您的主项，则会出现问题！如果是这样的话，你的孩子应该指定你父母的大小！

或者那就是你要问的那个？

Answer 3

语法为：

jQuery("ul#menu li").width(jQuery("ul#menu ul li").width());

这应该有效！

Answer 4

除非我错误地了解jQuery的宽度如何在一个元素数组上工作，否则Johlin的答案的问题是无法知道哪个LI的宽度将被用作新的宽度。
CSS意味着宽度是静态的，如果你需要改变LI的内容，你可能也需要更改CSS。如果这不是问题，那么CSS肯定是要走的路另一种jQuery方法是：

$('ul#nav li').each(function () {
    $(this).find('li').width($(this).outerWidth(true));
});

这会将所有子LI的宽度设置为父宽度