多个子菜单，每个子菜单都有总项目数

Question

我已经开始设计这个菜单并意识到它被认为比预期的更具挑战性。我正在尝试获取每个子菜单的总项目数 - html 下面是我的一个子菜单结构的示例。如果我把它们全部包括在内，那就太长了。

在导航菜单上，我希望在右侧的子菜单旁边显示计数（见图）。目前我在 css “.accordion-item::before { content: “x” }” 那里有一个“x”。理想情况下，我希望保持这种方式，希望我可以将计数作为伪元素。

图片参考：

HTML:

<ul id="navigation" class="drawer-navigation">
  <li id="menu-item-" class="menu-item menu-item-parent">
    <a class="accordion-item" href="https://www.google.com/">Photography</a>
    <ul class="submenu">
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Weddings</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Engagements</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Anniversaries</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Collaborations</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Lookbooks</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Family</a>
      </li>
      <li id="submenu-item-" class="submenu-item">
        <a href="www.google.com">Couples</a>
      </li>                                   
    </ul>
  </li>           
</ul>

CSS:

.menu-sidebar ul.drawer-navigation li.menu-item-parent a:not(ul.submenu li a)::before {
  content: "×";
  display: inline-block;
  positiion: relative;
  float: right;
  vertical-align: middle;
  font-size: 22px;
  transform-origin: center;
  transform: rotate(-45deg);
  transition-propery: transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.19, 1);
}

JS: 目前只获取所有子菜单子项的总数。

$(document).ready( function() {
  
  var $countSource = $("#navigation");
  $countSource.each( function() {
    var $countElements = $("li.menu-item-parent ul").children().length;
    console.log($countElements);
  });
  
});

Answer 1

影响伪 content 变量的方法是将其用作 css3 variable (custom property)。不像常规伪 CSS 规则（它们不是 DOM 的一部分，因此不能用 javascript 操纵）...

Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

我调整了css规则。您可以使用 > 仅指示顶级元素，这样您就不必使用 :not.

$(document).ready(function() {
  $("#navigation > li > a").each(function() {
    let len = $(this).parent().find('.submenu').children().length;
    $(this).css('--content', `'${len}'`);
  });
});

.menu-sidebar {
  width: 200px;
}

.menu-sidebar ul.drawer-navigation>li.menu-item-parent>a:before {
  content: var(--content, "g");
  display: inline-block;
  position: relative;
  float: right;
  vertical-align: middle;
  /* font-size: 22px;
transform-origin: center;
  transform: rotate(-45deg);
  transition-property: transform;
  transition-duration: 1600ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.19, 1);*/
}

.submenu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menu-sidebar'>
  <ul id="navigation" class="drawer-navigation">
    <li id="menu-item-" class="menu-item menu-item-parent">
      <a class="accordion-item" href="https://www.google.com/">Photography</a>
      <ul class="submenu">
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Weddings</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Engagements</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Anniversaries</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Collaborations</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Lookbooks</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Family</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Couples</a>
        </li>
      </ul>
    </li>

    <li id="menu-item-" class="menu-item menu-item-parent">
      <a class="accordion-item" href="https://www.google.com/">Fashion</a>
      <ul class="submenu">
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Lookbooks</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Family</a>
        </li>
        <li id="submenu-item-" class="submenu-item">
          <a href="www.google.com">Couples</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

多个子菜单，每个子菜单都有总项目数

Multiple Submenus Each with Total Item Count

navigation

foreach

jquery

count

counting