如何通过HTML和CSS实现点击元素使.choices__items保持可见至下次点击

算力阿峰

2026-7-7

解决方案

现有代码的问题在于:active伪类仅在元素被**按住（鼠标未松开）**时生效，松开后就会恢复隐藏，无法实现“点击后保持可见直到点击别处”的效果。我们需要结合JavaScript和CSS类来实现这个交互：

1. 调整CSS代码

用自定义类（比如is-open）控制显示状态，优化过渡效果：

.choices__items {
  visibility: hidden;
  opacity: 0; /* 搭配visibility实现平滑过渡，单独visibility过渡不明显 */
  transition: all 0.3s ease; /* 可按需调整过渡时长 */
}

.choices.is-open .choices__items {
  visibility: visible;
  opacity: 1;
}

2. 保留原有HTML结构

<div class="choices">
  <span>movies</span>
  <div class="choices__items">
    <div>
      <a>all</a>
      <a>films</a>
      <a>series</a>
    </div>
  </div>
</div>

3. 添加JavaScript交互逻辑

通过监听点击事件切换类，并处理点击外部关闭的逻辑：

const choices = document.querySelector('.choices');
const choicesItems = document.querySelector('.choices__items');

// 点击触发元素，切换下拉框显示状态
choices.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡，避免直接触发外部关闭逻辑
  choices.classList.toggle('is-open');
});

// 点击页面其他区域，关闭下拉框
document.addEventListener('click', () => {
  choices.classList.remove('is-open');
});

// 点击下拉框内部时，不触发关闭逻辑
choicesItems.addEventListener('click', (e) => {
  e.stopPropagation();
});