纯CSS实现点击触发下拉菜单的技术咨询

可以仅用纯CSS实现点击触发的下拉菜单，核心是利用复选框的:checked伪类来保存状态（你之前用的:active仅在鼠标按下时生效，松开后立即失效，这就是菜单瞬间隐藏的原因）。

修改后的HTML结构 #

需要在下拉容器中添加一个隐藏的复选框，并用<label>关联它（直接复用原按钮样式，无需额外调整）：

<div class="dropdown">
  <input type="checkbox" id="dropdown-trigger" class="dropdown-checkbox">
  <label for="dropdown-trigger" class="material-icon-button">
    <i class="icon icon-more_vert"></i>
  </label>
  <div class="dropdown-content" style="width: 295px;">
    <button class="material-button">
      <i class="icon icon-undo"></i>
      <span>Button 1</span>
    </button>
    <button class="material-button">
      <i class="icon icon-add_alert"></i>
      Button 2
    </button>
  </div>
</div>

调整后的CSS代码 #

添加隐藏复选框的样式，并替换原有的悬停触发逻辑为复选框选中触发：

/* 隐藏复选框，仅保留交互能力 */
.dropdown-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 30px;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

  button, a {
    border-bottom: 1px solid #e7e7e7;
    border-radius: unset;
    text-align: left;
    display: inline-block;
    width: 100%!important;

    .icon {
      margin-right: 15px;
      top: 0.13em;
    }

    &:hover {
      background-color: #e7e7e7 !important;
    }

    &:active {
      background-color: #c7c7c7 !important;
    }
  }
}

/* 复选框选中时显示下拉菜单 */
.dropdown-checkbox:checked ~ .dropdown-content {
  display: block;
}

原理说明 #

1. 隐藏的复选框用来持久化点击状态，点击关联的<label>会切换它的checked状态
2. CSS兄弟选择器~可以选中复选框后的.dropdown-content，当复选框被选中时，将菜单设置为display: block
3. 再次点击<label>会取消复选框的选中状态，菜单随之隐藏

内容的提问来源于stack exchange，提问作者Naveed Ahmed