当我在页脚中打开下拉列表时，标题中的关闭下拉列表（下拉列表具有相同的类）

时间：2016-05-03 15:47:49

标签： javascript jquery

我希望在整个网站中有一种以某种方式运行的下拉列表：

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

    6. 正如你在我的演示中所看到的，除了最后一个功能之外，我的所有功能都可以正常工作。 如果你点击下拉列表1而不是下拉列表2，那么一切都很完美。打开的新程序将关闭已打开的旧程序。

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

    解决此问题的任何解决方案？因此，当打开时，相同类型的下拉列表必须关闭之前打开的drodown，无论它在网页中的位置如何。感谢

    $(".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>

2 个答案:

答案 0 :(得分：2)

略微修改您的代码，您只需要使用选择器。

＆＃13;
＆＃13; 
$(".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");
});
＆＃13; 
#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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

在我看来，问题在于：

    $(this).parent().find(".dropdown").not(this).find(".dropdown-title").removeClass("activated");

您只是删除了父级中的激活类。

直接查找$('.dropdown')。

相关问题
最新问题