CSS 菜单需要在别处点击后消失

Question

我制作了一个菜单，当单击带有 CSS 和复选框的汉堡包按钮时会出现该菜单。到目前为止效果很好。但现在我希望它在点击页面其他地方时消失，而不仅仅是再次点击汉堡包按钮时。请问我该怎么做？

HTML:

<div class="navigatie"> 
  <input class="nav-toggle" id="nav-toggle" type="checkbox">
  <nav>
      <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="werkwijze.html">Werkwijze</a></li>
          <li><a href="overons.html">Over ons</a></li>
          <li><a href="faq.html">Faq</a></li>
          <li><a href="accreditatie.html">Accreditatie</a></li>
      </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label">
    <span><i class="fas fa-bars"></i></span>
  </label>
</div>

CSS:

.nav-toggle {
  display: none;
}
nav { 
  position: absolute;
  bottom: 100%;
  left: 30%;
  background-color: #f1f1f1;
  width: 40%;
  transform: scale(1,0);
  transform-origin: bottom;
  transition: transform 400ms ease-in-out;
}
nav a {
  color: #65A624;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 150ms ease-in;
  display: block;
}
nav a:hover:not(.active) {
  background-color: #555;
  color: white;
}
nav a.active {
  background-color: #65A624;
  color: white;
}
.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

你好，

桑德拉。

Answer 1

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

查看此 jsfiddle 示例。 http://jsfiddle.net/52VtD/5718/

Answer 2

CSS解法

如果你纯粹想要它 CSS 你可以做下面的例子，我编辑了一些东西因为你的代码遗漏了一些 CSS 和 HTML 以使其可以正确重现.但重点应该很清楚。 ;)

打开后出现一个叠加层，您可以通过点击叠加层中的任意位置关闭菜单（较暗的背景）

建议：使用JavaScript

不过，我建议使用 JavaScript 使其更简单。

.nav-toggle-label {
  width: 3rem;
  height: 3rem;
  margin: 0;
  display: block;
  background-color: #0F0;
}

.nav-toggle {
  width: 0.1rem;
  height: 0.1rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

nav {
  width: 40%;
  position: absolute;
  top: 0%;
  left: 30%;
  z-index: 110;
  background-color: #f1f1f1;
  transform: scale(1, 0);
  transform-origin: bottom;
  transition: transform 400ms ease-in-out;
}

nav a {
  color: #65A624;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 150ms ease-in;
  display: block;
}

nav a:hover:not(.active) {
  background-color: #555;
  color: white;
}

nav a.active {
  background-color: #65A624;
  color: white;
}

.nav-toggle:checked~.navigatie nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ .navigatie a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

.nav-toggle-close {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 100;
}

.nav-toggle:checked ~ .nav-toggle-close {
  display: block;
}

<input class="nav-toggle" id="nav-toggle" type="checkbox">
<label for="nav-toggle" class="nav-toggle-close"></label>
<div class="navigatie">
  <nav>
    <ul>
      <li><a href="index.html" class="active">Home</a></li>
      <li><a href="werkwijze.html">Werkwijze</a></li>
      <li><a href="overons.html">Over ons</a></li>
      <li><a href="faq.html">Faq</a></li>
      <li><a href="accreditatie.html">Accreditatie</a></li>
    </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label">
    <span><i class="fas fa-bars">Menu</i></span>
  </label>
</div>

CSS 菜单需要在别处点击后消失

CSS menu needs to disappear with a click elsewhere

html

css

checkbox

menu