如何隐藏 <ul> 标签而无需仅使用 CSS 修改 HTML

Question

我对以下 HTML 有疑问：如何隐藏

<ul>

标签，而不必仅使用 CSS 修改 HTML？

.principal input[type="checkbox"]:not(:checked)+#menuPrincipal {
  overflow: hidden;
  height: 0px;
}

.principal input[type="checkbox"]:checked+#menuPrincipal {
  transition: height 0.6s ease;
  height: 100vh;
  overflow: auto;
}

<header>
  <nav class="principal">
    <input type="checkbox" name="menuCheck" id="menuCheck">
    <label for="menuCheck" aria-role="button"></label>
    <ul id="menuPrincipal">
      <li><a href="">enlace 1</a></li>
      <li><a href="">enlace 2</a></li>
      <li>
        <input type="checkbox" name="submenuCheck" id="submenuCheck">
        <label for="submenuCheck" aria-role="button">enlace 3</label>
        <ul>
          <li><a href="">Sub Enlace 1</a></li>
          <li><a href="">Sub Enlace 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

Answer 1

由于它不是直接下一个兄弟，因此您必须使用波形符

~

而不是加号，否则您必须删除

input

和

ul

之间的标签

我还将您的转换移至

ul

，以便它可以双向转换，而不仅仅是在从选中状态变为未选中状态时进行转换。

#menuPrincipal {
  transition: height 0.6s ease;
}

.principal input[type="checkbox"]:not(:checked)~#menuPrincipal {
  overflow: hidden;
  height: 0px;
}

.principal input[type="checkbox"]:checked~#menuPrincipal {
  height: 100vh;
  overflow: auto;
}

<header>
  <nav class="principal">
    <input type="checkbox" name="menuCheck" id="menuCheck">
    <label for="menuCheck" aria-role="button"></label>
    <ul id="menuPrincipal">
      <li><a href="">enlace 1</a></li>
      <li><a href="">enlace 2</a></li>
      <li>
        <input type="checkbox" name="submenuCheck" id="submenuCheck">
        <label for="submenuCheck" aria-role="button">enlace 3</label>
        <ul>
          <li><a href="">Sub Enlace 1</a></li>
          <li><a href="">Sub Enlace 2</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>