html - 如何使我的可点击垂直下拉菜单仅使用 css 正常工作？

Question

我正在创建一个带有几个子菜单的垂直下拉菜单，只有在我单击相应的子菜单时才会显示菜单中的图标(向下箭头)。显示子菜单后，向下箭头的 Angular 应恢复为向上箭头，无论何时单击子菜单都会再次消失。

我到现在为止能做的是，当我第一次单击向下 Angular 箭头时，子菜单会滑动但不再有还原箭头或任何功能，所以我不能再次隐藏子菜单。

HTML:一个示例菜单项

<li class="menu">
   <a href="#" tabindex=0>First</a>

   <label for="close-1" ><i class="fa fa-angle-up"></i></label>
   <input type="radio" id="close-1" name="toggle1" >
   <label for="open-1"><i class="fa fa-angle-down" ></i></label>
   <input type="radio" name="toggle1" id="open-1">


   <ul class="sub-menu">
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
   </ul>
 </li>

CSS:

input[type="radio"] {
  display: none;
}

.menu  {
    position: relative;
    padding: 1em ;
    font-weight: 700;
    width: 100%;   
    border: 1px solid #eee;
    border-right: none;
}

.sub-menu {
    max-height: 0;
    transition: max-height 0.4s ease-in-out;
    overflow: hidden;
    padding: 0.5em;
}

.menu label {
    position: absolute;
    right: 10px;
    top: 20px;
    transition: 0.4s ease-in-out;
}

input[type="radio"]:checked + .sub-menu{
    max-height: 320px;
    transition: max-height 0.4s ease-in-out;
}

我试过类似的东西但是没有用

input[type="radio"]:checked label:nth-of-type(2) {
  opacity: 0;
  visibility: hidden;
}

input[type="radio"]:checked label:nth-of-type(1) {
   opacity: 1;
   visibility: visible;
}

我的想法是切换显示的两个箭头，我认为我的问题会得到解决，但如果没有 js，我不知道如何实现。

Answer 1

添加了一些动画并按照您的代码使其成为绝对动画:Fiddle

没有动画:Fiddle

---

.menu {
  position: relative;
  padding: 1em;
  font-weight: 700;
  width: 100%;
  border: 1px solid #eee;
  border-right: none;
}

.sub-menu {
  max-height: 0;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
  overflow: hidden;
  padding: 0, 0.5em, 0.5em;
}

.close {
  opacity: 0;
}

.open {
  opacity: 1;
  z-index: 5;
}

#open-1:checked~.close {
  opacity: 1;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]~label {
  position: absolute;
  right: 10px;
  top: 20px;
  transition: 0.4s ease-in-out;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  cursor: pointer;
}

#open-1:checked~.open {
  opacity: 0;
  z-index: 0;
}

#close-1:checked~.sub-menu {
  max-height: 0px;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
}

#open-1:checked~.sub-menu {
  max-height: 320px;
  transition: max-height 0.4s ease-in-out;
  -webkit-transition: max-height 0.4s ease-in-out;
  -moz-transition: max-height 0.4s ease-in-out;
  -ms-transition: max-height 0.4s ease-in-out;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<li class="menu">
  <a href="#" tabindex=0>First</a>
  <input type="radio" id="open-1" name="toggle1">
  <label class="open" for="open-1">
    <i class="fa fa-angle-down"></i>
  </label>
  <input type="radio" id="close-1" name="toggle1">
  <label class="close" for="close-1">
    <i class="fa fa-angle-up"></i>
  </label>
  <ul class="sub-menu">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
  </ul>
</li>