将导航栏CSS:hover改为点击交互适配触控设备的方案求助

纯CSS替代方案（无需JavaScript） #

使用复选框 hack 实现点击/触控触发的下拉菜单，这种方案在桌面和触控设备上都能稳定工作，无需依赖JS。

修改后的HTML代码 #

<div id="menu" class="active">
  <div class="categories">
    <input type="checkbox" id="news-toggle" class="category-toggle">
    <label for="news-toggle">News</label>
    <div class="locations">
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </div>
  </div>

  <div class="categories">
    <input type="checkbox" id="education-toggle" class="category-toggle">
    <label for="education-toggle">Education</label>
    <div class="locations">
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </div>
  </div>
</div>

修改后的CSS代码 #

#menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: left;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}
.categories {
  display: block;
  position: relative;
  width: 92%;
  margin: 0 auto;
  overflow: hidden;
  height: auto;
  text-align: left;
}
/* 隐藏复选框 */
.category-toggle {
  display: none;
}
/* 样式化标签，替代原链接 */
.categories label {
  display: block;
  position: relative;
  width: 100%;
  height: 42px;
  line-height: 42px;
  font-size: 1em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px dotted #121212;
  cursor: pointer;
}
/* 标签的 hover/focus 效果，匹配原链接样式 */
.categories label:hover,
.categories label:focus {
  color: #ffffff;
  background-color: #121212;
  padding-left: 25px;
}

.locations {
  display: none;
  position: relative;
  width: auto;
  height: auto;
  text-align: left;
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
  margin: 0 auto;
}
.locations a {
  display: block;
  font-size: 0.938em;
  color: #121212;
  text-transform: capitalize;
  text-align: left;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px dotted #121212;
}
.locations a:hover {
  color: #e5633f;
  background-color: inherit;
  padding-left: 0px;
  text-transform: capitalize;
}

/* 复选框选中时显示下拉菜单 */
.category-toggle:checked ~ .locations {
  display: block;
}

原理说明：隐藏的复选框作为状态开关，点击标签会切换复选框状态，CSS通过:checked伪类控制下拉菜单的显示/隐藏，触控设备点击标签会触发状态切换，完美适配需求。

JavaScript点击交互方案 #

这种方案提供更强的可控性，比如支持关闭其他下拉菜单、添加动画效果等。

修改后的HTML代码 #

<div id="menu" class="active">
  <div class="categories">
    <a href="#void" class="category-trigger">News</a>
    <div class="locations">
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </div>
  </div>

  <div class="categories">
    <a href="#void" class="category-trigger">Education</a>
    <div class="locations">
      <a href="#">Europe</a>
      <a href="#">Asia</a>
      <a href="#">Africa</a>
      <a href="#">Oceania</a>
      <a href="#">North America</a>
      <a href="#">South America</a>
    </div>
  </div>
</div>

修改后的CSS代码 #

#menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: left;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}
.categories {
  display: block;
  position: relative;
  width: 92%;
  margin: 0 auto;
  overflow: hidden;
  height: auto;
  text-align: left;
}
.categories .category-trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 42px;
  line-height: 42px;
  font-size: 1em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px dotted #121212;
}

.categories .category-trigger:hover,
.categories .category-trigger:focus {
  color: #ffffff;
  background-color: #121212;
  padding-left: 25px;
}

.locations {
  display: none;
  position: relative;
  width: auto;
  height: auto;
  text-align: left;
  overflow: hidden;
  padding-left: 25px;
  padding-right: 25px;
  margin: 0 auto;
}
.locations a {
  display: block;
  font-size: 0.938em;
  color: #121212;
  text-transform: capitalize;
  text-align: left;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px dotted #121212;
}
.locations a:hover {
  color: #e5633f;
  background-color: inherit;
  padding-left: 0px;
  text-transform: capitalize;
}

/* 添加 active 类时显示下拉菜单 */
.categories.active .locations {
  display: block;
}

JavaScript代码 #

// 获取所有分类触发器
const triggers = document.querySelectorAll('.category-trigger');

triggers.forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    // 阻止默认跳转行为
    e.preventDefault();
    // 获取父级分类容器
    const category = this.closest('.categories');
    // 切换 active 类
    category.classList.toggle('active');
    
    // 可选：关闭其他已打开的下拉菜单
    // triggers.forEach(otherTrigger => {
    //   if (otherTrigger !== this) {
    //     otherTrigger.closest('.categories').classList.remove('active');
    //   }
    // });
  });
});

原理说明：通过给分类容器添加/移除active类控制下拉菜单显示，JS监听点击事件切换类状态，触控设备点击链接会触发事件，完全适配触控交互。

为什么之前的方案无效？ #

CSS :hover 在触控设备上表现不稳定：单次点击会触发hover状态，但点击其他区域后状态会重置；基于焦点的方案（:focus/:focus-within）无法持久保持下拉菜单展开，因为触控设备不会默认保留元素焦点。

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