Question

我是jQuery的初学者因此我的无知，虽然我有一个问题。目前，该脚本的工作原理是，当您单击集合中的任何项目时，下拉父元素将隐藏或显示。当我点击下一个/上一个下拉列表 - 父项时，我希望下拉列表处于活动状态，但是当我点击调用者时，它会隐藏。我怎样才能做到这一点？

$(".dropdown-parent").on("click", function() {
  $("#dropdown").slideToggle("fast");
  $(".dropdown-parent").removeClass("active");
  $(this).addClass("active");
});

.active {
  background: red;
  color: #fff;
}

#dropdown {
background: black;
width: 200px;
height: 300px;
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dropdown-parent">test</a>
<a href="#" class="dropdown-parent">test2</a>
<a href="#" class="dropdown-parent">test3</a>
<a href="#" class="dropdown-parent">test4</a>

<div id="dropdown">
</div>

Answer 1

希望这会有所帮助。我已经改变了你的JS。

$(document).on('click','.dropdown-parent:not(.active)', function(){
   $(".dropdown-parent").removeClass("active");
   $(this).addClass("active");
   $("#dropdown").slideDown("fast")
});

$(document).on('click','.dropdown-parent.active', function(){
   $("#dropdown").slideToggle("fast");
});

.active {
   background: red;
   color: #fff;
}

#dropdown {
   background: black;
   width: 200px;
   height: 300px;
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		

<a href="#" class="dropdown-parent">test</a>
<a href="#" class="dropdown-parent">test2</a>
<a href="#" class="dropdown-parent">test3</a>
<a href="#" class="dropdown-parent">test4</a>

<div id="dropdown"></div>

在元素之间移动 - 保持display：block属性

1 个答案: