javascript - jQuery 根据条件显示/隐藏元素

Question

好的。我在代码下面。我想要执行的是，单击链接后，显示/隐藏(切换)具有类名 subsec 的下一个 div 并隐藏所有其他具有类名 subsec 的 div 。此外，在单击链接外部的任意位置并打开 div (div.subsec) 时，隐藏后者 (div.subsec)。

$(".links").on("click", function(){

 $(this).next("div.subsec").toggle("slow");

});

.subsec{
  display: none;
}

.mainDivs{
  float: left;
	padding: 25px;
}

li{
 border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 1</a>

<div class="subsec">
<ul>
  <li>11</li>
  <li>12</li>
</ul>
</div>

</div>

<div class="mainDivs">

<a href="javascript:void(0);" class="links">Link 2</a>

<div class="subsec">
<ul>
  <li>21</li>
  <li>22</li>
</ul>
</div>

</div>

Fiddle

切换方法效果很好，但需要在单击任何其他链接或文档中链接/打开的 div (div.subsec) 之外的任何位置时关闭之前打开的 div。

最好的实现方式是什么？？提前致谢。干杯!

Answer 1

您需要定位所有其他 subsec 元素并隐藏它们。您可以通过使用 subsec 类定位所有元素并使用 :not 选择器过滤掉目标 subsec 来做到这一点:

var subsec = $("div.subsec");
$(".links").on("click", function(){
   var target = $(this).next("div.subsec");
   subsec.not(target).hide('slow')
   target.toggle("slow");
});

Working Demo