CSS复选框式Navbar Toggler失效问题排查请求

核心原因：兄弟选择器的作用范围限制 #

你使用的CSS ~（通用兄弟选择器）只能匹配当前元素之后的同级元素，但input[name="navbar-toggler"]和.navbar-menu并不在同一个父元素下：

• check1的复选框位于<div class="container px-4 px-lg-5">内部
• .navbar-menu是该div父元素（nav）的下一个同级元素，属于跨层级关系，因此选择器无法生效。

而check2的复选框和.products都在<li class="nav-item">内部，属于同级元素，所以选择器能正常匹配。

修复方案 #

方案1：调整DOM结构，让复选框与目标元素同级 #

将.navbar-menu移到和复选框同一个父容器中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container px-4 px-lg-5">
    <a class="navbar-brand" href="#">Brand</a>
    <input id="check1" type="checkbox" name="navbar-toggler" />
    <label for="check1" class="navbar-toggler"><span class="navbar-toggler-icon"></span></label>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
        <li class="nav-item"><a class="nav-link" aria-current="page" href="/">Home</a></li>
        <li class="nav-item">
          <input id="check2" type="checkbox" name="dropdown" />
          <label for="check2" class="nav-link">Products</label>
          <ul class="products">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- 将navbar-menu移至此，与check1同级 -->
    <div class="navbar-menu mb-4">
      <div class="container">
        <a href="#">Item 3</a>
        <a href="#">Item 4</a>
      </div>
    </div>
  </div>
</nav>

方案2：用JavaScript控制（无需调整DOM结构） #

如果不想修改DOM结构，可以通过监听复选框状态变化来控制菜单显示：

document.getElementById('check1').addEventListener('change', function() {
  const menu = document.querySelector('.navbar-menu');
  menu.style.display = this.checked ? 'block' : 'none';
});

额外修复：HTML标签闭合错误 #

你的HTML中<label>标签未正确闭合，<span class="navbar-toggler-icon"></label>应改为<span class="navbar-toggler-icon"></span></label>，虽然不影响当前功能，但可能引发其他样式或布局问题。

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