Question

我使用Bootstrap，导航菜单元素由用户生成。有些用户可能只需要2个菜单列表项，有些用户可能需要8个菜单列表项。

我希望能够根据菜单中的项目数设置菜单导航元素的宽度。因此，例如，如果有4个菜单项，则li宽度将设置为25％，如果有2个，则li宽度将设置为50％

有没有一种方法可以让jQuery做到这一点？

<ul class="nav nav-pills mainNav">
    <li><a href="#">Home</a> </li>
    <li><a href="#">Link 1</a> </li>
    <li class="active"><a href="#">Link 2</a> </li>
    <li><a href="#">Link 3</a> </li>
    <li><a href="#">Link 4</a> </li>
    <li><a href="#">Link 5</a> </li>
    <li><a href="#">Link 6</a> </li>
</ul>

如何让jQuery根据项目数设置宽度？

Answer 1

所以我使用以下代码根据数字来设置LI的宽度：

$.fn.autowidth = function() {
return this.each(function() {        
    $('li', this).css({'width' : (100 / $('li', this).length) + '%'})
});
};
$('.mainNav').autowidth();

Answer 2

仅仅是为了记录，这是flexbox做得非常出色的一个案例：

.mainNav {
    display: flex;
    flex-direction: row;
}

.mainNav li {
  flex-grow: 1;
}

显然具有浏览器支持等的所有含义

jQuery设置List Items的宽度

2 个答案: