如何使用onclick功能打开子菜单并使用onclick功能隐藏

Question

我做了一个侧边栏导航我这样做,所以鼠标悬停打开子菜单,但我想要点击打开并在同一个选项卡上点击隐藏它.请检查此代码中的代码谢谢.

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
      <li><a href="">Contact us</a></li>
  </ul>
</nav>

https://codepen.io/anon/pen/erNpYG

提前致谢.

Answer 1

您可以使用隐藏的复选框与一般兄弟组合子(~)关闭并打开子菜单点击没有javascript:

html, body {
    font-family: Arial, Helvetica, sans-serif;
}
.navigation {
  width: 300px;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a, .mainmenu label {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}
.mainmenu a:hover, .mainmenu label:hover {
    background-color: #C5C5C5;
}

/* hide the input */
.mainmenu input {
  display: none;
}
/* if a sibling checkbox is check show the menu */
.mainmenu input:checked ~ .submenu {
  display: block;
  max-height: 200px;
}
.submenu a, .submenu label {
  background-color: #999;
}
.submenu a:hover {
  background-color: #666;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  transition: all 0.5s ease-out;
}

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><input type="checkbox" id="products">
      <label for="products">Products</label>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>