时间戳

首页 > 解决方案 > CSS菜单需要在其他地方点击消失

html - CSS菜单需要在其他地方点击消失

问题描述

我制作了一个菜单，当单击带有 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;
}

问候，

桑德拉。

标签： htmlcsscheckboxmenu

解决方案

$(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/

推荐阅读