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

Question

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

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

My CodePen.

图片参考：

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 进行操作）...

自定义属性是普通属性，所以可以声明在 任何元素，都可以通过正常的继承和级联来解决 规则，可以使用@media 和其他有条件的 规则，可用于 HTML 的 style 属性，可使用读取或设置 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>