Question

我试图让我的菜单在选中我的切换复选框时显示，但是不会。我知道为什么我的.menu-container不是我的toggle元素的兄弟，但是，我不知道如何在不将div移出div的情况下使其正常工作，因此我的.menu-container可以直接进行。我仍在学习Javascript（我是三年级），因此可以理解，可以做到这一点，但是CSS是目前我的前进方向，除非您对js有一个简单的解释/解决方案。

我希望这是有道理的。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}


/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }
  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }
  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }
  #toggle:checked+.menu-container {
    display: block;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Bundles</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Comptible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mynavtext.css">
  <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>

<body>

  <nav class="nav-container">

    <div class="toggle-container">
      <label class="toggle" for="toggle"><i class="fas fa-bars"></i></label>
      <input type="checkbox" id="toggle">
    </div>

    <div class="menu-container">
      <a class="menu-item" href="#">Categories</a>
      <a class="menu-item" href="#">How It Works</a>
      <a class="menu-item" href="#">Log In</a>
      <a class="menu-item" href="#">Register</a>
    </div>

  </nav>

</body>

</html>

谢谢

Answer 1

在现在的html结构中，css无法解决。将input元素移到div元素之外，此问题已解决。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}

/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }

  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }

  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }



  #toggle:checked+.menu-container {
    display: block;
  }

}

<!DOCTYPE html>
<html>

  <head>
    <title>Bundles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Comptible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="mynavtext.css">
    <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
  </head>

  <body>

    <nav class="nav-container">

      <div class="toggle-container">
        <label class="toggle" for="toggle"><i class="fas fa-bars"></i>icon</label>
      </div>
      <input type="checkbox" id="toggle">
      <div class="menu-container">
        <a class="menu-item" href="#">Categories</a>
        <a class="menu-item" href="#">How It Works</a>
        <a class="menu-item" href="#">Log In</a>
        <a class="menu-item" href="#">Register</a>
      </div>

    </nav>

  </body>

</html>

伪和相邻兄弟选择器

1 个答案: