Bootsrap v4.1: закрытие свертывающегося меню при нажатии за пределами div

Question

Я пытаюсь разработать код для Plug and Play Mega-Menu. Я обнаружил, что использование метода коллапса кажется довольно эффективным для этого.

Я все еще пытаюсь понять, как закрыть свернутый элемент при нажатии за пределами меню. Я начинающий в Javascript, поэтому использовать jquery немного сложно.

Редактировать : недавно я столкнулся с лучшим фрагментом кода, который не является смесью Javascript и JQuery. Я попытался применить его, но все еще не могу понять, как правильно нацелить метод .collapse().

У виджета ниже есть другая проблема, не уверенная, связана ли она с моим кодом, поскольку у меня раньше были проблемы с отображением информации неправильно. Попробуйте это JSfiddle .

JQuery (отредактировано):

$(document).mouseup(function(e) {
  var container = $("#mega-menu");

  // if the target of the click isn't the container nor a descendant of the container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    //alert("hi");
    container.collapse();
    //$('.collapse').collapse()
  }

---

Код:

.dropdown-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125);
  padding: 1rem;
  border-radius: 0;
}

.mega-menu-toggle {
  cursor: pointer;
}

.mega-menu-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

@media (max-width: 767px) {
  .dropdown-mega-menu {
    position: static;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Navigation -->
<nav class="navbar navbar-light bg-light navbar-expand-md sticky-top">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		  </button>
    <div class="collapse multi-collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link mega-menu-toggle" data-toggle="collapse" data-target="#mega-menu" role="button" aria-expanded="false" aria-controls="mega-menu">Dropdown link</a>
          <div class="dropdown-mega-menu collapse multi-collapse" id="mega-menu">
            <h3>Heading</h3>
            <div class="row">
              <div class="col-md">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Action</a>
              </div>
              <div class="col-md">
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Another action</a>
              </div>
              <div class="col-md">
                <div>
                  Other none linked content.
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer 1

После дальнейшего расследования я считаю, что неправильно использовал метод коллапса.Использование существующего JQuery и добавление collapse('hide'), кажется, делает эту работу:

$(document).mouseup(function(e) 
{
    var container = $("#mega-menu");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.collapse('hide');
    }
});