Закрыть javascript меню при нажатии на элемент или потеря фокуса

Question

Я пытаюсь настроить меню, которое нашел на CodePen. Вот то, что я нашел.

Я пытаюсь изменить его так, чтобы меню закрывалось после того, как вы щелкнули по элементу или если вы щелкнули вне меню. Я пробовал разные вещи, но не могу заставить его работать.

Вот мой html:

<!-- new hamburger menu be here -->
<div id="menu-main">
    <div id="menu-wrapper">
         <div id="hamburger-menu"><span></span><span></span><span></span></div>
         <!-- hamburger-menu -->
            </div>
    <!-- menu-wrapper -->
            <ul class="menu-list accordion">
                <li id="nav1">
                    <a class="menu-link" href="index.html">Home</a>
                </li>
                <li id="nav2">
                    <a class="menu-link" href="#about">About the Project</a>
                </li>
                <li id="nav3">
                    <a class="menu-link" href="#timeline">Timeline</a>
                </li>
                <li id="nav4">
                    <a class="menu-link" href="#vision">The Vision</a>
                </li>
                <li id="nav5">
                    <a class="menu-link" href="#where">Where We Are</a>
                </li>
                <li id="nav6">
                    <a class="menu-link" href="#news">Stay In Touch</a>
                </li>
                <li id="nav7">
                    <a class="menu-link" href="#faq">FAQ</a>
            </ul>
</div>

Вот мой JavaScript

    $(function() {
  function slideMenu() {
    var activeState = $("#menu-main .menu-list").hasClass("active");
    $("#menu-main .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
  }

  $("#menu-wrapper").click(function(event) {
    event.stopPropagation();
    $("#hamburger-menu").toggleClass("open");
    $("#menu-main .menu-list").toggleClass("active");
    slideMenu();

  $("body").toggleClass("overflow-hidden");
  });

  $(".menu-list").find(".accordion-toggle").click(function() {
    $(this).next().toggleClass("open").slideToggle("fast");
    $(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");

    $(".menu-list  .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
    $(".menu-list  .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
  });


}); // jQuery load

Я пробовал добавлять различные классы в этом бите, так как считаю, что это то, что контролирует код, но безуспешно:

  $(".menu-list").find(".accordion-toggle").click(function() {
    $(this).next().toggleClass("open").slideToggle("fast");
    $(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");

    $(".menu-list  .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
    $(".menu-list  .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
  });

Хотел бы помочь с этим.

Answer 1

Вы можете добавить проверку при щелчке по документу, чтобы увидеть, был ли нажат элемент, который пользователь щелкнул за пределами div меню.

$(function() {
  function slideMenu() {
    var activeState = $("#menu-container .menu-list").hasClass("active");
    $("#menu-container .menu-list").animate({
      left: activeState ? "0%" : "-100%"
    }, 400);
  }
  $("#menu-wrapper").click(function(event) {
    event.stopPropagation();
    $("#hamburger-menu").toggleClass("open");
    $("#menu-container .menu-list").toggleClass("active");
    slideMenu();

    $("body").toggleClass("overflow-hidden");
  });

  $(".menu-list").find(".accordion-toggle").click(function() {
    $(this).next().toggleClass("open").slideToggle("fast");
    $(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");

    $(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
    $(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
  });


  $(document).on("click", function(e) {
    let isLink = jQuery(e.target).is(".accordion-content a");
    let isOutside = jQuery(e.target).closest("#menu-container").length == 0;

    if (isLink || isOutside)
      $("#menu-wrapper").trigger("click");
  })
}); // jQuery load

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

body {
  font-family: 'Dosis', sans-serif;
  background: #FF5722;
}

#menu-wrapper {
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
}

#menu-wrapper #hamburger-menu {
  position: relative;
  width: 25px;
  height: 20px;
  margin: 15px;
}

#menu-wrapper #hamburger-menu span {
  opacity: 1;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  color: black;
  background-color: white;
  position: absolute;
  transform: rotate(0deg);
  transition: .4s ease-in-out;
}

#menu-wrapper #hamburger-menu span:nth-child(1) {
  top: 0;
}

#menu-wrapper #hamburger-menu span:nth-child(2) {
  top: 9px;
}

#menu-wrapper #hamburger-menu span:nth-child(3) {
  top: 18px;
}

#menu-wrapper #hamburger-menu.open span:nth-child(1) {
  transform: translateY(9px) rotate(135deg);
}

#menu-wrapper #hamburger-menu.open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-60px);
}

#menu-wrapper #hamburger-menu.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-135deg);
}

#menu-container .menu-list .menu-submenu {
  padding-top: 20px;
  padding-bottom: 20px;
}

#menu-container .menu-list {
  padding-left: 0;
  display: block;
  position: absolute;
  width: 100%;
  max-width: 450px;
  background: white;
  box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  left: -100%;
}

#menu-container .menu-list li.accordion-toggle,
#menu-container .menu-list .menu-login {
  font-size: 16px;
  padding: 20px;
  text-transform: uppercase;
  border-top: 1px solid #dbdcd2;
}

#menu-container .menu-list li:first-of-type {
  border-top: 0;
}

.accordion-toggle,
.accordion-content {
  cursor: pointer;
  font-size: 16px;
  position: relative;
  letter-spacing: 1px;
}

.accordion-content {
  display: none;
}

.accordion-toggle a:before,
.accordion-toggle a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  background-color: #5a5858;
  transform-origin: 50% 50%;
  transition: all 0.3s ease-out;
}

.accordion-toggle a:before {
  transform: rotate(-90deg);
  opacity: 1;
  z-index: 2;
}

.accordion-toggle.active-tab {
  background: yellowgreen;
  transition: all 0.3s ease;
}

.accordion-toggle a.active:before {
  transform: rotate(0deg);
  background: #fff !important;
}

.accordion-toggle a.active:after {
  transform: rotate(180deg);
  background: #fff !important;
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-container">
  <div id="menu-wrapper">
    <div id="hamburger-menu"><span></span><span></span><span></span></div>
    <!-- hamburger-menu -->
  </div>
  <!-- menu-wrapper -->
  <ul class="menu-list accordion">
    <li id="nav1" class="toggle accordion-toggle">
      <span class="icon-plus"></span>
      <a class="menu-link" href="#">Menu1</a>
    </li>
    <!-- accordion-toggle -->
    <ul class="menu-submenu accordion-content">
      <li><a class="head" href="#">Submenu1</a></li>
      <li><a class="head" href="#">Submenu2</a></li>
      <li><a class="head" href="#">Submenu3</a></li>
    </ul>
    <!-- menu-submenu accordon-content-->
    <li id="nav2" class="toggle accordion-toggle">
      <span class="icon-plus"></span>
      <a class="menu-link" href="#">Menu2</a>
    </li>
    <!-- accordion-toggle -->
    <ul class="menu-submenu accordion-content">
      <li><a class="head" href="#">Submenu1</a></li>
      <li><a class="head" href="#">Submenu2</a></li>
    </ul>
    <!-- menu-submenu accordon-content-->
    <li id="nav3" class="toggle accordion-toggle">
      <span class="icon-plus"></span>
      <a class="menu-link" href="#">Menu3</a>
    </li>
    <!-- accordion-toggle -->
    <ul class="menu-submenu accordion-content">
      <li><a class="head" href="#">Submenu1</a></li>
      <li><a class="head" href="#">Submenu2</a></li>
      <li><a class="head" href="#">Submenu3</a></li>
      <li><a class="head" href="#">Submenu4</a></li>
    </ul>
    <!-- menu-submenu accordon-content-->
  </ul>
  <!-- menu-list accordion-->
</div>
<!-- menu-container -->