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

如何解决多个子菜单，每个子菜单都有项目总数

我已经开始设计这个菜单并意识到它比预期的更具挑战性。我正在尝试获取每个子菜单的总项目数 - 下面是我的子菜单结构之一的 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);
  });
  
});

解决方法

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

自定义属性是普通属性，因此可以在任何元素，都通过正常的继承和级联解决规则，可以用@media 和其他条件设置规则，可以在 HTML 的样式属性中使用，可以使用读取或设置 CSSOM等

我调整了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>