javascript - 当我在页脚中打开下拉菜单时，关闭页眉中的下拉菜单(下拉菜单具有相同的类)

Question

我想在整个网站中使用单一类型的下拉菜单，并以某种方式运行:

1. 它必须在点击时打开
2. 当我在显示的 block 内单击时，它必须保持打开状态
3. 如果我在打开的 block 之外单击，它必须关闭
4. 如果我再次点击打开下拉列表的标题*，它必须关闭
5. 如果我点击新的下拉菜单，任何现有打开的下拉菜单都必须关闭

正如您在我的演示中看到的，除了最后一个功能只能部分工作之外，我的所有功能都可以工作。如果您单击下拉菜单 1，然后单击下拉菜单 2，则一切都很完美。打开的新窗口将关闭已打开的旧窗口。

现在，再次打开下拉列表 1(从页眉)，然后单击打开下拉列表 3 或 4(位于页脚区域)，您将看到页眉的下拉列表将保持打开状态。

有什么办法可以解决这个问题吗？因此，相同类型的下拉菜单在打开时必须关闭先前打开的下拉菜单，无论它在网页中的位置如何。谢谢

$(".dropdown").click(function(event) {
  event.stopPropagation();
  $(this).parent().find(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
  $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
  $(".dropdown-values").fadeOut(500);
  $(".dropdown-title").removeClass("activated");
});

$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").fadeToggle(500);
  $(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});

#header {
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
}
#content {
  height: 200px;
}
#footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.dropdown {
  background: #313654 none repeat scroll 0 0;
  cursor: pointer;
  display: inline-block;
}
.dropdown-title {
  color: #fff;
  display: block;
}
a {
  background-color: transparent;
  outline: medium none;
}
.dropdown-values {
  background: #0089d7 none repeat scroll 0 0;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  display: none;
  margin-top: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
  <div class="dropdown">
    <a class="dropdown-title">dropdown 1</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 1 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 1 content</a>
      </div>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">dropdown 2</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 2 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 2 content</a>
      </div>
    </div>
  </div>
</div>
<div id="content">
</div>
<div id="footer">
  <div class="dropdown">
    <a class="dropdown-title">dropdown 3</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 3 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 3 content</a>
      </div>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">dropdown 4</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 4 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 4 content</a>
      </div>
    </div>
  </div>
</div>

Answer 1

稍微修改一下您的代码，您只需使用选择器即可。

$(".dropdown").click(function(event) {
  event.stopPropagation();
  $(".dropdown").not(this).find(".dropdown-values").fadeOut(500);
  $(".dropdown").not(this).find(".dropdown-title").removeClass("activated");
});
$(document).click(function(event) {
  $(".dropdown-values").fadeOut(500);
  $(".dropdown-title").removeClass("activated");
});

$(".dropdown-title").click(function(event) {
  $(this).siblings(".dropdown-values").fadeToggle(500);
  $(this).parents(".dropdown").find('.dropdown-title').toggleClass("activated");
});

#header {
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
}
#content {
  height: 200px;
}
#footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.dropdown {
  background: #313654 none repeat scroll 0 0;
  cursor: pointer;
  display: inline-block;
}
.dropdown-title {
  color: #fff;
  display: block;
}
a {
  background-color: transparent;
  outline: medium none;
}
.dropdown-values {
  background: #0089d7 none repeat scroll 0 0;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  display: none;
  margin-top: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="header">
  <div class="dropdown">
    <a class="dropdown-title">dropdown 1</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 1 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 1 content</a>
      </div>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">dropdown 2</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 2 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 2 content</a>
      </div>
    </div>
  </div>
</div>
<div id="content">
</div>
<div id="footer">
  <div class="dropdown">
    <a class="dropdown-title">dropdown 3</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 3 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 3 content</a>
      </div>
    </div>
  </div>
  <div class="dropdown">
    <a class="dropdown-title">dropdown 4</a>
    <div class="dropdown-values">
      <div class="dropdown-value">
        <a class="dropdown-value" href="/test5">dropdown 4 content</a>
      </div>
      <div class="">
        <a class="dropdown-value" href="/test6">dropdown 4 content</a>
      </div>
    </div>
  </div>
</div>