0

伟大的 Google 和 SO 并没有呈现关于此的搜索结果。有些是相似的，但并没有让我到达那里。

我需要制作一个无类子菜单，它将样式属性附加到<li>子<ul>中的每个人，以便根据子列表项的数量设置最小宽度属性。

的HTML

<nav>
<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT COMPANY</a></li>
  <li>
    <a href="#" class="sub">ABOUT PRODUCT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>
  <li><a href="#">GETTING STARTED</a></li>
  <li>
    <a href="#" class="sub">PATIENT SUPPORT</a>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">CONTACT</a></li>
  <li><a href="#">eUPDATES</a></li>
</ul>
</nav>

JavaScript

$('.sub').text(function() {
    var count = $(this).next().find('li').length;
    var totalwidth = count * 115;
    $(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});

我需要能够在不基于“sub”类进行搜索的情况下做到这一点。我已经尝试了几次，但似乎都没有我目前使用的代码那么强大。我正在与之合作的后端开发人员要求它都是<ul><li></li></ul>没有类的简单结构。

如果有人可以帮助我指出正确的方向，我将非常感谢您的时间和帮助！

4

1 回答 1

1

定位所有包含 UL 的 LI 项目，找到这些 UL 中 LI 的数量，然后乘以宽度：

$('ul', 'li').css('min-width', function() {
    return ( $(this).find('li').length * 115 ) + 'px';
});
于 2013-04-30T21:10:35.347 回答