javascript - 单个容器上的多个下拉列表不会相互干扰

Question

我在导航栏中创建了一个下拉菜单，如果我有其中一个当然没问题，但如果我有多个下拉菜单，它就无法按预期工作。如果我点击第一个下拉菜单，它会打开，但如果我在打开后也点击第二个下拉菜单，两者 其中一个打开而不关闭另一个未被点击的，我如何实现这样的功能？

这是我当前的代码:

HTML:

<nav class="navbar">
    <ul class="navbar-links">
        <li class="navbar-link"><a href="#">Home</a></li>
        <li class="navbar-link"><a href="#">About</a></li>
        <li class="navbar-link dropdown">
            <a href="#">
            Projects
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Shanary</a>
                <a href="#">Physics Solver</a>
                <a href="#">A simple blog</a>
            </div>
        </li>
        <li class="navbar-link dropdown">
            <a href="#">
            Projects
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            </a>
            <div class="dropdown-content">
                <a href="#">Something else</a>
                <a href="#">Text Editor</a>
                <a href="#">A social Network</a>
            </div>
        </li>
    </ul>
</nav>

CSS:

.navbar {
    background-color: #3A506B;
    border-bottom: 1px solid #cccccc;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.navbar-links {
    margin: 0;
    font-size: 16px;
    list-style-type: none;
}
.navbar-link,
.dropdown-content a {
    display: inline-block;
    padding: 20px 0px;
    transition: background 0.1s ease-in-out;
}
.navbar-link:hover,
.dropdown-content a:hover {
    background: #3f5775;
}
.navbar-link a {
    padding: 20px 10px;
    color: #5DD39E;
    text-decoration: none;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 160px;
    padding: 10px;
    z-index: 1;
    background-color: #3A506B;
}
.dropdown-content a {
    display: block;
}
body {
    font-family: 'Open Sans', Arial, sans-serif;
    background: #FFFFFF;
    color: #16302B;
    margin: 0px;
}
.visible {
    display: block;
}

到目前为止，这是我的 JavaScript 文件:

$('.dropdown').click(function() {
    $(this).find('.dropdown-content').toggleClass('visible');
});

这里还有 JSFiddle .

问题是，它们都打开而没有关闭另一个，这是正在发生的事情的图像:

Answer 1

您将必须遍历所有目标以确定它们是否是当前目标并移除可见性

请看下面的片段

$('.dropdown').click(function(e) {
  $(this).find('.dropdown-content').toggleClass('visible');
  var that = this;
  $('.dropdown').each(function() {
    if (that != this) {
      $(this).find('.dropdown-content').removeClass('visible');
    }
  })
});

.navbar {
  background-color: #3A506B;
  border-bottom: 1px solid #cccccc;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.navbar-links {
  margin: 0;
  font-size: 16px;
  list-style-type: none;
}

.navbar-link,
.dropdown-content a {
  display: inline-block;
  padding: 20px 0px;
  transition: background 0.1s ease-in-out;
}

.navbar-link:hover,
.dropdown-content a:hover {
  background: #3f5775;
}

.navbar-link a {
  padding: 20px 10px;
  color: #5DD39E;
  text-decoration: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 160px;
  padding: 10px;
  z-index: 1;
  background-color: #3A506B;
}

.dropdown-content a {
  display: block;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: #FFFFFF;
  color: #16302B;
  margin: 0px;
}

.visible {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar">
  <ul class="navbar-links">
    <li class="navbar-link"><a href="#">Home</a></li>
    <li class="navbar-link"><a href="#">About</a></li>
    <li class="navbar-link dropdown">
      <a href="#">
            Projects
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            </a>
      <div class="dropdown-content">
        <a href="#">Shanary</a>
        <a href="#">Physics Solver</a>
        <a href="#">A simple blog</a>
      </div>
    </li>
    <li class="navbar-link dropdown">
      <a href="#">
            Projects
            <i class="fa fa-caret-down" aria-hidden="true"></i>
            </a>
      <div class="dropdown-content">
        <a href="#">Something else</a>
        <a href="#">Text Editor</a>
        <a href="#">A social Network</a>
      </div>
    </li>
  </ul>
</nav>