javascript - 根据类名称扩展菜单栏元素，包括子菜单

Question

例如，如果您的菜单栏具有以下结构:

<nav>
  <ul class="nav">
    <li class="menu1"><a href="#">Menu Item 1</a></li>
    <li class="menu2"><a href="#">Menu Item 2</a>
      <ul>
        <li class="menu2.1"><a href="#">Menu Item 2.1</a></li>
        <li class="subMenu2"><a href="#">Menu Sub-Menu Item 2</a>
          <ul>
            <li class="subMenu2.1"><a href="#">Menu Sub-Menu Item 2.1</a></li>
            <li class="subMenu2.2"><a href="#">Menu Sub-Menu Item 2.2</a></li>
            <li class="subMenu2.3"><a href="#">Menu Sub-Menu Item 2.3</a></li>
            <li class="subMenu2.4"><a href="#">Menu Sub-Menu Item 2.4</a></li>
          </ul>
        </li>
        <li class="menu2.2"><a href="#">Menu Item 2.2</a></li>
        <li class="menu2.3"><a href="#">Menu Item 2.3</li>
      </ul>
    </li>
  </ul>
</nav>

而记录的类名subMenu2.2是已知的，你将如何扩展这个子菜单和它的父菜单，所以这个菜单的内容可以用外部查看调用，而不是单击菜单栏本身。

因此，如果 subMenu2.2 是要查看的元素，那么类名称为 menu2 的所有内容和菜单栏部分将显示或处于事件状态所以它可以在页面上可见。

通常，要查看菜单项，您可以按自己的方式浏览菜单项，悬停时可能会显示某些子菜单。 我的预期目标是根据给定/提供的类名显示子菜单或父菜单。

Answer 1

您可以为页面提供主体 ID 并根据它设置菜单样式或编写事件状态脚本。这是一篇进一步解释这一点的文章。我希望这有帮助。 css-tricks.com/id-your-body-for-greater-css-control-and-specificity