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

Question

好的。我已经低于代码。我想要执行的是，单击链接后，显示/隐藏（切换）非常 NEXT div 具有类名subsec 并隐藏所有其他具有类名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

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

实现的最佳方法是什么？提前致谢。干杯！！

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

Answer 2

你可以在onclick监听文档来监听所有的点击。

我会检查我点击的内容是否已点击，并确定是否要保留，然后隐藏其他所有内容。

我在每张支票中都添加了 cmets，例如，如果您想要它，以便当您在 .subsec 内单击时，您可以注释掉该部分……等等。

$(".links").on("click", function(){
 $(this).next("div.subsec").toggle("slow");
});

$(document).on('click', function (e) {
  var $e = $(e.target);
  var keep;
  //if the link is clicked, keep the next .subsec
  if ($e.is('a')) keep = $e.next();
  //if we click inside a .subsec, also keep
  if ($e.is('.subsec')) keep = $e;
  //if our parent is a .subsec keep too
  var $c = $e.closest('.subsec');
  if ($c.length) keep = $c;  
  //now we know what we want to keep, lets hide others
  $('.subsec').not(keep).hide('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>

Answer 3

您好，请尝试以下代码。

var _clicked = false;
$(".links").on("click", function(){
 $(".subsec").hide("slow");
 $(this).next("div.subsec").toggle("slow");
$(window).off("click",onWindowClick);
$(window).on("click",onWindowClick);
_clicked = true;

});
function onWindowClick(e)
{
if(!_clicked && !(e.target.parentNode && e.target.parentNode.parentNode && e.target.parentNode.parentNode.className =='subsec' ))
   {
     $(".subsec").hide("slow");
     $(window).off("click",onWindowClick);
   }
   _clicked = false;

}