复选框在切换时不会打开菜单

Question

我正在制作一个响应式导航栏，它会变成手机上的汉堡包图标。我使用媒体查询来检查手机并创建一个汉堡包图标。然后我做了一个移动菜单，当汉堡包图标被切换时，它会出现和消失。这是我的代码：

HTML:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Responsive Nav Bar</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
  </head>

  <body>
    <!-- Nav Bar -->
    <nav>
      <h2>Nav Bar</h2>
      <div class="nav-left">
        <a>Home</a>
        <a>About</a>
        <a>Blog</a>
        <a>Contact</a>
      </div>
      <div class="nav-right">
        <a>Log In</a>
        <a>Sign Up</a>
      </div>

      <div class="mobile-nav">
        <label for="toggle"><h2>&#9776;</h2></label>
        <input type="checkbox" id="toggle">
      </div>
      <div class="menu"> <!-- Mobile Menu -->
        <a>Home</a>
        <a>About</a>
        <a>Blog</a>
        <a>Contact</a>
        <hr>
        <a>Log In</button>
        <a>Sign Up</button>
      </div>
    </nav>
  </body>
</html>

SASS（使用编译器）：

// Fonts
@import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");


* {
  margin: 0px;
  padding: 0px;
}

// Navbar
nav {
  width: auto;
  padding: 30px;
  background-color: #fafafa;
  display: flex;
  align-content: center;
  flex-wrap: wrap;

  h2 {
    color: #303030;
    font-family: "Mukta", sans-serif;
    margin-right: 30px;
  }
}

.nav-right {
  margin-left: auto;

  a {
    margin-right: 15px;
    margin-top: auto;
    font-family: "Mukta", sans-serif;
    text-decoration: none;
    color: rgb(109, 109, 109);
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }
}

.nav-left {
  display: flex;
  align-content: center;

  a {
    margin-right: 15px;
    margin-top: auto;
    font-family: "Mukta", sans-serif;
    text-decoration: none;
    color: rgb(109, 109, 109);
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }
}

div.mobile-nav {
  display: none;

  label {
    display: none;
  }

  #toggle {
    display: none;
  }
}

.menu {     // Mobile Menu Styling, Display is none
  width: 100vw;
  font-family: "Mukta", sans-serif;
  display: none;
  flex-direction: column;
  background-color: #fafafa;
  z-index: 1000;

  a {
    margin: 5px 0px;
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }

  hr {
    margin: 5px 0px;
    border-color: #a3a3a3;
    border-style: solid;
  }
}

@media only screen and (max-width: 500px) {
  div.mobile-nav {
    width: auto;
    height: 60px;
    display: flex;

    label {
      display: block;
      cursor: pointer;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
    }

    #toggle:checked + .menu {  // Displaying the Menu
      display: flex;
    }
  }

  nav h2 {
    font-size: 5vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
  }

  div.nav-left {
    display: none;
  }

  div.nav-right {
    display: none;
  }
}

问题出在这一行：

#toggle:checked + .menu {
  display: flex;
}

单击汉堡包图标时，它不会显示菜单，而是保持显示以阻止。

我尝试过的事情：

将显示更改为在单击切换复选框时阻止显示
未选中时将显示设置为 none，如所述选中时将显示设置为
正如 Toni Michel Caubet 所说，将 .menu div 和 #toggle checkbox 放在一个 div 中（此方法确实有效，谢谢，但它适用于像 h1 这样的单个元素，而不适用于一个 div 包含许多元素)
将 .menu div 和 #toggle 复选框放入 div

编辑：

在第 4 点，事情开始有所进展。当我将 + 更改为逗号以将它们组合在一起时，菜单出现了。但是再次点击后并没有关闭。我将显示更改为汉堡包菜单的块，并且在加载页面时选中了复选框。但是取消选中后，复选框消失了，但菜单没有。我需要一个解决方案。

注意：

我想在不使用 JavaScript 或 jQuery

的情况下完全在 CSS（或 SASS）中完成

感谢您的帮助！

Answer 1

这里发生的事情很少。

如评论中所述，问题是您的复选框与移动导航不在同一个容器中。
您还有一些 <a> 标记，以 </button> 结尾，这意味着您的 html 不正确。

解决方案

将复选框的标签保留在原处。
将复选框移动到 .menu 的直接同级。
然后调整你的 css 使 #toggle 成为 selector 而不是 div.mobile-nav #toggle.
toggle是一个id，你不需要有更强的特异性，因为它是一个独特的元素。

select或：.foo + .foo2
的简短提醒 selector 将 select 每个具有 class .foo2 的元素，如果它们是具有 class .foo 的元素的下一个兄弟。
因此，它们必须在同一个父节点中并且彼此相邻。

<nav>
  <h2>Nav Bar</h2>
  <div class="nav-left">
    <a>Home</a>
    <a>About</a>
    <a>Blog</a>
    <a>Contact</a>
  </div>
  <div class="nav-right">
    <a>Log In</a>
    <a>Sign Up</a>
  </div>

  <div class="mobile-nav">
    <label for="toggle"><h2>&#9776;</h2></label>
  </div>

  <-- I've moved the checkbox. Now the selector #toggle + .menu will work  -->
  <input type="checkbox" id="toggle"> 

  <div class="menu"> <!-- Mobile Menu -->
    <a>Home</a>
    <a>About</a>
    <a>Blog</a>
    <a>Contact</a>
    <hr>
    <a>Log In</button>
    <a>Sign Up</button>
  </div>
</nav>

// Fonts
@import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");


* {
  margin: 0px;
  padding: 0px;
}

// Navbar
nav {
  width: auto;
  padding: 30px;
  background-color: #fafafa;
  display: flex;
  align-content: center;
  flex-wrap: wrap;

  h2 {
    color: #303030;
    font-family: "Mukta", sans-serif;
    margin-right: 30px;
  }
}

.nav-right {
  margin-left: auto;

  a {
    margin-right: 15px;
    margin-top: auto;
    font-family: "Mukta", sans-serif;
    text-decoration: none;
    color: rgb(109, 109, 109);
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }
}

.nav-left {
  display: flex;
  align-content: center;

  a {
    margin-right: 15px;
    margin-top: auto;
    font-family: "Mukta", sans-serif;
    text-decoration: none;
    color: rgb(109, 109, 109);
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }
}

div.mobile-nav {
  display: none;

  label {
    display: none;
  }

}
#toggle {
  display: none;
}

.menu {     // Mobile Menu Styling, Display is none
  width: 100vw;
  font-family: "Mukta", sans-serif;
  display: none;
  flex-direction: column;
  background-color: #fafafa;
  z-index: 1000;

  a {
    margin: 5px 0px;
    transition: all 0.4s ease;
  }

  a:hover {
    color: #26b1db;
  }

  hr {
    margin: 5px 0px;
    border-color: #a3a3a3;
    border-style: solid;
  }
}

@media only screen and (max-width: 500px) {
  div.mobile-nav {
    width: auto;
    height: 60px;
    display: flex;

    label {
      display: block;
      cursor: pointer;
      margin-left: auto;
      margin-top: auto;
      margin-bottom: auto;
    }


  }
  #toggle { //#toggle is on it's own now, it doesn't need more specificity
    visibility: hidden;
    height: 0;
    width: 0;
  }
  #toggle:checked + .menu {  // Displaying the Menu
    display: flex;
  }
  nav h2 {
    font-size: 5vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
  }

  div.nav-left {
    display: none;
  }

  div.nav-right {
    display: none;
  }
}

复选框在切换时不会打开菜单

Check box doesn't open up menu when toggled

html

sass

navbar

responsive-design

hamburger-menu

HTML:

SASS（使用编译器）：

我尝试过的事情：

编辑：

注意：

解决方案