仅用CSS实现手风琴效果？需解决按钮二次点击关闭问题

问题根源 #

你当前用button:focus伪类触发菜单展开，但按钮获得焦点后，再次点击不会自动移除焦点状态，导致无法通过点击按钮关闭菜单；而点击其他区域时按钮失去焦点，菜单会正常关闭。

解决方案 #

只需在原有CSS中添加一行代码，利用:active伪类在按钮被点击时临时禁用指针事件，让按钮在再次点击时失去焦点，从而实现菜单的切换效果：

.drop-down ul{ 
  display:block; 
  max-height:0; 
  visibility:hidden; 
  transition: visibility 0s, opacity .3s, max-height .3s; /* 修正原拼写错误visibilty为visibility */
  opacity: 0; /* 补充opacity过渡的初始状态 */
}

.drop-down button{ 
  background:none; 
  border:none; 
  position:relative;
  cursor: pointer; /* 添加鼠标指针样式，提升交互体验 */
}

.drop-down button:after{ 
  position:absolute; 
  content:"^"; 
  right:-10px; 
  top:-10px;
  transform: rotate(180deg);  
  font-size:1.2em;
  transition: transform .3s; /* 添加箭头旋转的过渡动画 */
}

.drop-down button:focus:after{ 
  transform: rotate(0deg);
  pointer-events:none;
}

.drop-down button:focus + ul {
  background-color:green; 
  visibility:visible; 
  max-height:450px;
  opacity: 1; /* 展开时显示透明度 */
}

/* 新增：点击按钮时临时禁用指针事件，让按钮失去焦点 */
.drop-down button:active {
  pointer-events: none;
}

对应的HTML代码无需修改：

<nav>
<ul>
<li><a href="#">Level 1 Nav</a></li>
<li class="drop-down">
<button>Level 1 button</button>
  <ul>  
    <li><a href="#">Level 2 Nav</a></li>
     <li><a href="#">Level 2 Nav</a></li>
   </ul>
  </li>
<li><a href="#">Level 1 Nav</a></li>
</ul>
</nav>

效果说明 #

• 第一次点击按钮：按钮获得焦点，菜单展开，箭头旋转
• 再次点击按钮：按钮处于:active状态，指针事件被禁用，焦点自动移除，菜单关闭，箭头恢复原角度
• 点击页面其他区域：按钮失去焦点，菜单关闭，箭头恢复原角度

另外修正了原CSS中transition属性的拼写错误（visibilty改为visibility），并补充了过渡动画的完整状态，让效果更流畅。

内容的提问来源于stack exchange，提问作者John Macpherson