通过其子元素数量更改父宽度？

Question

在下面的示例中，我有一个标头，左边是徽标容器，中间是菜单，右边是一个按钮。 在示例中，菜单包含5个顶级项目和2个子菜单​​。

<div class="container">
   <div class="logo_container">
      <img src="logo.png" />
   </div>
   <div id="top-navigation">
      <div id="top-menu-nav">
         <ul id="top-menu">
            <li class="top-item">Top Item 1</li>
            <li class="top-item">Top Item 2
               <ul>
                  <li class="sub-item">Sub-Item 1</li>
                  <li class="sub-item">Sub-Item 2</li>
                  <li class="sub-item">Sub-Item 3</li>
                  <li class="sub-item">Sub-Item 4</li>
               </ul>
            </li>
            <li class="top-item">Top Item 3
               <ul>
                  <li class="sub-item">Sub-Item 5</li>
                  <li class="sub-item">Sub-Item 6</li>
                  <li class="sub-item">Sub-Item 7</li>
                  <li class="sub-item">Sub-Item 8</li>
               </ul>
            </li>
            <li class="top-item">Top Item 4</li>
            <li class="top-item">Top Item 5</li>
         </ul>
      </div>
      <ul id="menu-button">
         <li class="menu-button-cta">Button</li>
      </ul>
   </div>
</div>

由于可能添加或删除了顶级项目，因此我想根据菜单中顶级项目的数量来更改父元素的宽度。

例如：

• <ul id="top-menu">有5个<li class="top-item"> = .container {width: 100%;}
• <ul id="top-menu">具有4个<li class="top-item"> = .container {width: 90%;}
• <ul id="top-menu">具有3个<li class="top-item"> = .container {width: 80%;}

有没有办法在CSS或jQuery中做到这一点？

Answer 1

您可以使用.children().length在jquery中执行此操作，例如：

$("ul.top-menu").each(function() {
    $(this).addClass(".container-" + $(this).children(".top-item").length);
});

然后的CSS：

.container-5 { width: 100%; }
.container-4 { width: 90%; }
.container-5 { width: 80%; }

Answer 2

这是我的jQuery解决方案。 首先，计算孩子的身长，然后相应地应用样式。

var lengthOfChildren = $("#top-menu").children().length;
switch (lengthOfChildren) {
  case 3:
    $(".container").css("width", "80%");
    break;
  case 4:
    $(".container").css("width", "90%");
    break;
  default:
    $(".container").css("width", "100%");
}