javascript - Bootstrap v4.1 : Closing a collapse menu when clicking outside of div

Question

我正在尝试为即插即用 Mega-Menu 开发代码。我发现使用 collapse 方法似乎对此非常有效。

我仍然想弄清楚如何在菜单外单击时关闭折叠的元素。我是 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');
    }
});