当子菜单不是点击目标时，子菜单不会隐藏

Question

我一直在努力解决这个简单问题。当点击其他元素但它不会关闭时，我的某个导航菜单选项卡的子菜单应该关闭。

＆＃13;

＆＃13;

var query = document.querySelector.bind(document);

query('.drop-down').onclick = function() {
  query('.sub-menu').classList.toggle('nav-show');
}

window.onclick = function(e) {
  if (query('.sub-menu').style.display == 'block') {
    if (e.target != query('.sub-menu')) {
      query('.sub-menu').classList.remove('nav-show');
    }
  }
}

＆＃13;

.menu {
  display: table;
  background: #f9f8f8;
  padding: 0;
  margin: 5em auto;
  border-radius: 0.5em;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
}
.menu > li {
  display: table-cell;
  width: 100px;
  list-style: none;
  text-align: center;
}
.menu > li.drop-down {
  position: relative;
}
.menu > li > a {
  display: block;
  text-decoration: none;
  color: #9c9c9f;
  padding: .8em;
  font: 1em Arial, sans-serif;
}
.menu > li > a:hover {
  color: #757579;
}
.sub-menu {
  position: absolute;
  padding: 0;
  top: 100%;
  right: 0;
  left: 0;
  background: #f9f8f8;
  border: 1px solid #f1f1f1;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
  display: none;
}
.sub-menu.nav-show {
  display: block;
}
.sub-menu > li {
  list-style: none;
  display: block;
  text-align: center;
}
.sub-menu > li:not(:first-child) {
  border-top: 1px solid #f1f1f1;
}
.sub-menu > li > a {
  text-decoration: none;
  display: block;
  font: 0.9em Arial, sans-serif;
  color: #9c9c9f;
  padding: 1em 0;
}
.sub-menu > li > a:hover {
  background: white;
}

＆＃13;

<ul class="menu">
  <li><a href="" onclick="return false">Home</a>
  </li>
  <li class="drop-down"><a href="" onclick="return false">Projects</a>
    <ul class="sub-menu">
      <li><a href="/">HTML</a>
      </li>
      <li><a href="/">CSS3</a>
      </li>
      <li><a href="/">JavaScript</a>
      </li>
      <li><a href="/">PHP</a>
      </li>
    </ul>
  </li>
  <li><a href="" onclick="return false">Forums</a>
  </li>
  <li><a href="" onclick="return false">Blog</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

有人可以帮我解决这个问题吗？

Answer 1

您需要stopPropagation() method来阻止执行任何父事件处理程序。 有关详细信息，请参阅w3 wiki。

以下是jQuery的一个简单示例：

$(".drop-down").click(function(e) {
  e.stopPropagation();
  $('.sub-menu').toggleClass('nav-show');
});

$(document).click(function(e) {
    $('.sub-menu').removeClass('nav-show');
});

.menu {
  display: table;
  background: #f9f8f8;
  padding: 0;
  margin: 5em auto;
  border-radius: 0.5em;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
}
.menu > li {
  display: table-cell;
  width: 100px;
  list-style: none;
  text-align: center;
}
.menu > li.drop-down {
  position: relative;
}
.menu > li > a {
  display: block;
  text-decoration: none;
  color: #9c9c9f;
  padding: .8em;
  font: 1em Arial, sans-serif;
}
.menu > li > a:hover {
  color: #757579;
}
.sub-menu {
  position: absolute;
  padding: 0;
  top: 100%;
  right: 0;
  left: 0;
  background: #f9f8f8;
  border: 1px solid #f1f1f1;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.8);
  display: none;
}
.sub-menu.nav-show {
  display: block;
}
.sub-menu > li {
  list-style: none;
  display: block;
  text-align: center;
}
.sub-menu > li:not(:first-child) {
  border-top: 1px solid #f1f1f1;
}
.sub-menu > li > a {
  text-decoration: none;
  display: block;
  font: 0.9em Arial, sans-serif;
  color: #9c9c9f;
  padding: 1em 0;
}
.sub-menu > li > a:hover {
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li><a href="" onclick="return false">Home</a>
  </li>
  <li class="drop-down"><a href="" onclick="return false">Projects</a>
    <ul class="sub-menu">
      <li><a href="/">HTML</a>
      </li>
      <li><a href="/">CSS3</a>
      </li>
      <li><a href="/">JavaScript</a>
      </li>
      <li><a href="/">PHP</a>
      </li>
    </ul>
  </li>
  <li><a href="" onclick="return false">Forums</a>
  </li>
  <li><a href="" onclick="return false">Blog</a>
  </li>
</ul>