Question

我正在学习响应式菜单，通过谷歌搜索，我发现了汉堡包复选框黑客。我想做的是通过单击汉堡只显示直接后代，并隐藏子菜单。

#toggle-menu {
  cursor: pointer;
}

#primary-nav,
#menu-toggle,
#primary-nav>ul {
  display: none;
}

#menu-toggle:checked+#primary-nav {
  display: block;
}

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
  <a href="#">
    <h1>Company</h1>
  </a>
  <label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
  <input type="checkbox" id="menu-toggle">
  <ul id="primary-nav">
    <li>home</li>
    <li>dropdown
      <ul>
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </li>
  </ul>
</div>

任何帮助将不胜感激

Answer 1

要仅在ul之后显示input，您需要隐藏所有ul，然后仅在选中的ul之后直接显示input

然后您可以在所有输入上添加一个类，并对子菜单执行相同的操作。

#toggle-menu {
  cursor: pointer;
}

.toggler,         /*checkboxes a class of toggler and hide */
ul {              /* hide all menus (you may want to give them all a class) */
  display: none;
}

.toggler:checked+ul {    /* only show a ul if it is directly after a checked toggler input */
  display: block;
}

<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<div class="menu">
  <a href="#">
    <h1>Company</h1>
  </a>
  <label for="menu-toggle" id="toggle-menu"><i class="far fa-bars"></i></label>
  <input type="checkbox" id="menu-toggle" class="toggler">
  <ul id="primary-nav">
    <li>home</li>
    <li>
      <label for="sub-menu1">dropdown</label>                <!-- use a label and target the checkbox below -->
      <input type="checkbox" class="toggler" id="sub-menu1"> <!-- add this -->
      <ul>
        <li>sub1</li>
        <li>sub2</li>
      </ul>
    </li>
  </ul>
</div>

使用+和>选择器

1 个答案: