Question

好的。我在Code下面。我想要执行的是，在单击链接时，显示/隐藏（切换）非常下一个div具有类名subsec＆amp;隐藏所有其他具有classname subsec的div。此外，点击链接上的任何地方点击＆amp;打开div（div.subsec），隐藏后者（div.subsec）。

＆＃13;

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

＆＃13;

.subsec{
  display: none;
}

.mainDivs{
  float: left;
	padding: 25px;
}

li{
 border: 2px solid blue;
}

＆＃13;

<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>

＆＃13;

Fiddle

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

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

Answer 1

您需要定位所有其他subsec元素并隐藏它们。您可以通过使用类subsec定位所有元素并使用:not选择器过滤掉目标子秒来实现此目的：

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

您可以尝试使用以下代码。

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;

}

Answer 3

您可以通过点击文档来收听所有点击。

如果我点击了，我会检查点击的内容并查看是否要保留，并隐藏其他所有内容。

我在每张支票中都加了评论，所以例如如果你想要它，那么当你也点击.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>

jQuery显示/隐藏基于条件

3 个答案: