仅用HTML&CSS实现响应式导航栏：点击链接同时触发复选框与跳转

你遇到的核心矛盾很明确：点击导航链接时，要么只能触发锚点滚动、要么只能关闭菜单，没法同时完成两个动作。这是因为浏览器会优先处理<a>标签的跳转行为，不会自动触发外部<label>的复选框状态切换。下面给你两种可行的解决思路，优先推荐JavaScript方案，直观且兼容性拉满。

方法一：JavaScript监听点击事件（推荐） #

这个方法逻辑简单，给每个导航链接绑定点击事件，点击时手动切换复选框状态，同时保留锚点的滚动跳转功能。

修改后的HTML代码 #

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav>
  <input type="checkbox" id="res-nav">
  <ul class="nav-links">
    <li ><a class="nav-link" href="#home">Home</a></li>
    <li ><a class="nav-link" href="#veranstaltungen">Veranstaltungen</a></li>
    <li ><a class="nav-link" href="#konzerte">Konzerte</a></li>
    <li ><a class="nav-link" href="#ausstellungen">Ausstellungen</a></li>
    <li ><a class="nav-link" href="#feste">Feste & Hochzeiten</a></li>
    <li ><a class="nav-link" href="#anfahrt">Anfahrt</a></li>
  </ul>
  <label for="res-nav" class="fa fa-bars" id="hamburger"></label>
  <label for="res-nav" class="fa fa-times" id="kreuz"></label>
</nav>

<script>
// 获取所有导航链接和复选框元素
const navLinks = document.querySelectorAll('.nav-link');
const resNavCheckbox = document.getElementById('res-nav');

// 给每个链接绑定点击事件
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    // 手动关闭复选框，触发菜单收起的CSS变换
    resNavCheckbox.checked = false;
  });
});
</script>

配套CSS小调整 #

把原来的大<label>包裹结构拆开，让汉堡和叉号各自作为指向复选框的独立label，菜单的打开/关闭逻辑完全保留：

#hamburger, #kreuz { 
  font-size: 45px; 
  padding-left: 8vw; 
  color: #929292; 
  cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
}
#hamburger { display: block; }
#kreuz { display: none; }
#res-nav { display: none; }
.nav-links { 
  position: fixed; 
  width: 100%; 
  height: 85vh; 
  background-color: rgba(255, 255, 255, 0.85); 
  top: 15vh; 
  left: -100%; 
  text-align: center; 
  transition: .5s; 
}
.nav-link { 
  display: block; 
  margin: 40px 0; 
  line-height: 30px; 
  font-size: 30px; 
  text-decoration: none; 
  color: #929292; 
  /* 这里不再需要pointer-events: none; 链接恢复正常跳转功能 */
}
#res-nav:checked~.nav-links { left: 0; }
#res-nav:checked~#hamburger { display: none; }
#res-nav:checked~#kreuz { display: block; }

方法二：纯CSS技巧（局限性较大） #

如果不想引入JS，可以尝试给每个<li>嵌套label，但会增加冗余代码；或者利用CSS的pointer-events组合:active伪类，但实际体验中容易出现跳转和菜单关闭不同步的问题，兼容性也不如JS方案，这里只作参考，不推荐在生产环境使用。

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

你把整个菜单和图标都放在一个<label>里，点击<a>标签时，浏览器会直接处理它的锚点跳转，不会触发外部<label>的复选框切换；而设置pointer-events: none会让链接失去跳转功能，这就是你陷入两难的核心原因。用JS的方法可以完美破解这个矛盾：点击链接时先关闭菜单，再让浏览器正常处理锚点滚动，两者互不干扰。

内容的提问来源于stack exchange，提问作者Theo-Steiner