如何在VS Code中实现点击主按钮显示两个可跳转子按钮

以下是纯前端实现的可行方案，直接复制到VS Code里就能运行，满足你点击主按钮显示两个带跳转功能的子按钮需求：

1. HTML 结构 #

<div class="button-container">
  <button id="main-btn">Do you enter?</button>
  <div class="sub-buttons">
    <a href="/yes-page.html" class="sub-btn">YES</a>
    <a href="/no-page.html" class="sub-btn">NO</a>
  </div>
</div>

• 用容器包裹主按钮和子按钮组，方便统一控制布局
• 子按钮用<a>标签直接实现页面跳转，比按钮加JS跳转更简洁

2. CSS 样式 #

.button-container {
  position: relative;
  display: inline-block;
}

#main-btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
}

.sub-buttons {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  display: none; /* 默认隐藏子按钮组 */
  gap: 8px;
}

.sub-buttons.show {
  display: flex; /* 显示时用flex横向排列按钮 */
}

.sub-btn {
  padding: 8px 16px;
  background-color: #f1f1f1;
  color: black;
  text-decoration: none;
  border-radius: 4px;
}

.sub-btn:hover {
  background-color: #ddd;
}

• 用相对+绝对定位让子按钮组固定在主按钮下方
• 通过.show类控制显示/隐藏，比直接修改display属性更易维护
• flex布局确保两个子按钮自动排列，间距可调

3. JavaScript 逻辑 #

const mainBtn = document.getElementById('main-btn');
const subButtons = document.querySelector('.sub-buttons');

mainBtn.addEventListener('click', () => {
  subButtons.classList.toggle('show');
});

// 点击页面其他区域隐藏子按钮（可选优化）
document.addEventListener('click', (e) => {
  if (!mainBtn.contains(e.target) && !subButtons.contains(e.target)) {
    subButtons.classList.remove('show');
  }
});

• 主按钮点击事件用classList.toggle()切换子按钮组的显示状态
• 可选的外部点击隐藏逻辑，提升用户体验

关键说明 #

• CSS hover方案无法实现点击触发，因为CSS没有原生点击状态切换逻辑，必须借助JS控制
• 两个子按钮放在同一容器中，控制容器的显示状态就能同时展示，无需单独操作每个按钮
• 跳转路径直接替换为你实际的页面地址即可，比如/yes.html或具体的页面URL

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