如何使用HTML/CSS实现点击按钮后保持导航栏（Navbar）处于展开状态？

兄弟，我懂你踩的这个坑！用button:focus控制导航栏展开确实会遇到这种尴尬——只要你点按钮之外的任何地方（包括导航栏本身），按钮就会失去焦点，导航栏直接缩回去，根本没法点里面的链接对吧？别慌，给你两个靠谱的解决方案，纯CSS和JS的都有，看你偏好哪种：

方案一：纯CSS实现（无需JavaScript） #

这个方法用隐藏的复选框来持久化展开状态，比focus靠谱多了，完全不用写JS：

步骤说明： #

1. 把你的汉堡按钮换成<label>标签，和一个隐藏的复选框绑定
2. 用复选框的:checked伪类来控制导航栏的显示/隐藏
3. 点击汉堡按钮（其实是点label）就会切换复选框的选中状态，导航栏会一直保持展开，直到你再次点击按钮

代码示例： #

HTML

<!-- 隐藏的复选框，用来记录导航栏的展开状态 -->
<input type="checkbox" id="navbar-toggle" class="navbar-toggle">

<!-- 汉堡按钮其实是label，和复选框关联 -->
<label for="navbar-toggle" class="hamburger-btn">☰</label>

<!-- 你的全屏导航栏 -->
<div class="openednavbar">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</div>

CSS

/* 隐藏复选框，只用来记录状态 */
.navbar-toggle {
  display: none;
}

/* 汉堡按钮的基础样式，你可以自己调整 */
.hamburger-btn {
  font-size: 2rem;
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}

/* 默认状态下导航栏隐藏（用transform做滑入滑出动画） */
.openednavbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  transform: translateX(-100%); /* 初始隐藏在左侧 */
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 99;
}

/* 复选框选中时，导航栏滑入显示 */
.navbar-toggle:checked ~ .openednavbar {
  transform: translateX(0);
}

/* 可选：添加半透明遮罩，点击遮罩也能关闭导航栏 */
.navbar-toggle:checked ~ .hamburger-btn::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  z-index: -1;
}

方案二：JavaScript切换类名（更灵活） #

如果需要更复杂的交互（比如点击导航栏外部自动关闭），用JS切换类名是更灵活的选择：

代码示例： #

HTML

<button class="hamburger-btn">☰</button>

<div class="openednavbar">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">服务</a>
  <a href="#">联系我们</a>
</div>

CSS

.hamburger-btn {
  font-size: 2rem;
  cursor: pointer;
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
}

.openednavbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 99;
}

/* 导航栏展开时的类 */
.openednavbar.active {
  transform: translateX(0);
}

JavaScript

const hamburgerBtn = document.querySelector('.hamburger-btn');
const navbar = document.querySelector('.openednavbar');

// 点击汉堡按钮切换导航栏的展开/收起状态
hamburgerBtn.addEventListener('click', () => {
  navbar.classList.toggle('active');
});

// 可选：点击导航栏外部时自动关闭导航栏
document.addEventListener('click', (e) => {
  // 判断点击的元素是否不在导航栏内，也不是汉堡按钮
  if (!navbar.contains(e.target) && !hamburgerBtn.contains(e.target)) {
    navbar.classList.remove('active');
  }
});

为什么你的原方案不行？ #

之前用button:focus的核心问题是：焦点状态是临时的——只要你点击页面上任何不是这个按钮的元素，按钮就会失去焦点，导航栏的样式就会回到初始状态。而上面的两种方案都是用持久化的状态（复选框的checked属性或者DOM元素的类名）来控制导航栏的显示，所以点击导航栏内部不会触发状态改变，导航栏会一直保持展开，直到你主动切换它。

备注：内容来源于stack exchange，提问作者Habib Stephan