Закрытие меню при нажатии в любом месте в теле документа, кроме самого меню

Question

У меня есть меню, которое открывается, когда пользователь нажимает значок. Я хочу, чтобы меню закрывалось, когда пользователь щелкает где-либо еще на странице, но у меня возникают проблемы с завершением функции. Ниже мой html и функции:

    <div id="header">
      <div id="menu">
        <div class="menu-container" id="myLinks">
          <?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'home-top')); ?>
          <?php wp_nav_menu(array('container_class' => 'hike-menu', 'theme_location' => 'hike')); ?>
          <?php wp_nav_menu(array('container_class' => 'primary-menu', 'theme_location' => 'primary')); ?>
        </div>
        <a href="javascript:void(0);" class="icon" onclick="myToggleFunction()" id="toggle-menu">
          <span></span>
        </a>
      </div>
    </div>

    function myToggleFunction() {
      var element = document.getElementById("toggle-menu");
      element.classList.add("active");
      var x = document.getElementById("myLinks");
      if (x.style.width === "290px") {
        x.style.width = "0px";
        element.classList.remove("active");
      } else {
        x.style.width = "290px";
      }
    }

    jQuery(document.body).click(function(e) {
      if (jQuery("#toggle-menu").hasClass("active") && jQuery("#myLinks").css("width", "290px")) {
        jQuery("#myLinks").css("width", "0px");
        jQuery("#toggle-menu").removeClass("active");
      }
    });

Когда пользователь нажимает «toggle-menu», открывается меню. MyToggleFunction () прекрасно работает, но когда я щелкаю где-либо за ее пределами, меню закрывается, и это проблема. Кто-нибудь знает, как я могу переделать свою функцию для достижения этой цели?

Answer 1

Отметьте event.target, чтобы определить, следует ли закрыть меню или нет.

$(function() {
  $("html").on("click", function(e) {
    let $t = $(e.target),
      $myLinks = $("#myLinks"),
      $toggleMenu = $("#toggle-menu");
    if ($t.is($myLinks) || $myLinks.has($t).length) {
      //clicked in the menu. do nothing
    } else if ($t.is($toggleMenu) || $toggleMenu.has($t).length) {
      $myLinks.toggleClass("open");
    } else {
      $myLinks.removeClass("open");
    }
  })
});

html,
body {
  margin: 0;
  min-height: 100%;
  background: #eee;
}

#myLinks {
  background: #ccc;
  max-height: 0px;
  height:auto;
  overflow: hidden;
  transition: max-height 0.4s;
}

#myLinks.open {
  max-height: 200px;
}

#myLinks a {
  display: block;
  margin: 10px;
}

#toggle-menu {
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <div id="menu">
    <div class="menu-container" id="myLinks">
      <a href="#">menu</a>
      <a href="#">items</a>
      <a href="#">here</a>
    </div>
    <a href="#" class="icon" id="toggle-menu">
      <span>toggle menu</span>
    </a>
  </div>
</div>

Answer 2

Вы можете установить функцию закрытия меню на теле и установить e.stopPropagation () на само меню