CSS悬停菜单适配：iPad端点击同一分类关闭下拉方案问询

当然可以实现！下面是适配你需求的具体代码修改方案，兼顾桌面端悬停展开和平板端点击切换展开/收起的逻辑：

1. HTML 调整 #

替换为你需要的分类（Politics、Economy、Education）和地区选项（Asia、Europe、North America），结构保持一致即可：

<div id="menu" class="active">
  <div class="categories" tabindex="1">
    <div class="touch">Politics</div>
    <div class="locations">
      <a href="link.html">Asia</a>
      <a href="link.html">Europe</a>
      <a href="link.html">North America</a>
    </div>
  </div>

  <div class="categories" tabindex="2">
    <div class="touch">Economy</div>
    <div class="locations">
      <a href="link.html">Asia</a>
      <a href="link.html">Europe</a>
      <a href="link.html">North America</a>
    </div>
  </div>

  <div class="categories" tabindex="3">
    <div class="touch">Education</div>
    <div class="locations">
      <a href="link.html">Asia</a>
      <a href="link.html">Europe</a>
      <a href="link.html">North America</a>
    </div>
  </div>
</div>

2. CSS 修改 #

新增 .active 类控制下拉显示，同时保留桌面端 hover 效果，并针对触摸设备优化避免误触发：

#menu {
  grid-area: menu;
  width: 100%;
  height: auto;
  text-align: center;
  border-bottom: 3px solid #121212;
  background-color: inherit;
  position: sticky;
  top: 0;
  cursor: pointer;
  z-index: 8;
}

.categories {
  position: relative;
  display: inline-block;
  background-color: inherit;
  width: auto;
  height: auto;
  text-align: center;
  padding: 0px 15px 0px 15px;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 400;
}

.categories:hover,
.categories.active .touch {
  color: #e5633f;
}

.categories .touch {
  position: relative;
  display: inline-block;
  width: auto;
  height: 42px;
  line-height: 42px;
}

.categories .touch:before {
  content: "▪ ";
}

.locations {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  text-align: center;
  white-space: nowrap;
  background-color: inherit;
}

.locations a {
  display: block;
  font-size: 15px;
  padding: 0 40px 0 40px;
  text-transform: capitalize;
  height: 36px;
  line-height: 36px;
  border-left: 1px solid #121212;
  border-right: 1px solid #121212;
  border-bottom: 1px solid #121212;
}

.locations a:hover {
  color: #ffffff;
  background-color: #121212;
}

/* 桌面端悬停展开 + 平板端激活状态展开 */
.categories:hover .locations,
.categories.active .locations {
  display: block;
  animation: santiaborg 555ms ease-in-out forwards;
  transform-origin: top center;
}

@keyframes santiaborg {
  0% {
    transform: scaleY(0) translateX(-50%);
  }
  80% {
    transform: scaleY(1.1) translateX(-50%);
  }
  100% {
    transform: scaleY(1) translateX(-50%);
  }
}

/* 触摸设备禁用hover触发，避免误操作 */
@media (pointer: coarse) {
  .categories:hover .locations {
    display: none;
  }
}

3. JavaScript 逻辑 #

添加点击切换逻辑，实现平板端点击展开/收起，同时处理点击外部区域关闭下拉：

const categories = document.querySelectorAll('.categories');

// 分类点击事件：切换当前分类状态，关闭其他分类
categories.forEach(category => {
  category.addEventListener('click', (e) => {
    e.stopPropagation();
    category.classList.toggle('active');
    categories.forEach(otherCat => {
      if (otherCat !== category) otherCat.classList.remove('active');
    });
  });
});

// 点击页面其他区域关闭所有下拉
document.addEventListener('click', () => {
  categories.forEach(category => category.classList.remove('active'));
});

// 键盘Tab导航时关闭下拉
categories.forEach(category => {
  category.addEventListener('blur', () => category.classList.remove('active'));
});

适配效果说明 #

• 桌面端：鼠标悬停分类自动展开下拉，移开鼠标收起；
• 平板/触摸设备：点击分类展开下拉，再次点击同一分类收起；点击页面其他区域也会关闭所有下拉；
• 媒体查询 (pointer: coarse) 会自动识别触摸设备，禁用hover触发逻辑，避免触摸时的误操作。

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