jQuery Show/Hide 基于条件的元素

Question

好的。我在代码下面。我想要执行的是，单击 Link、Show/Hide（切换）非常下一个 div 具有类名 subsec 并隐藏所有其他 div类名 subsec。此外，在 link 之外的任意位置单击并打开 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 以及单击任何其他 link 或文档中 link/opened div 之外的任何位置（div.subsec).

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

Answer 1

您需要定位所有其他 subsec 元素并隐藏它们。您可以通过使用 class 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

您好，请尝试使用以下代码。

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

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

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

我在每个检查中都添加了注释，例如，如果您需要它，那么当您也单击 .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 Show/Hide 基于条件的元素

jQuery Show/Hide element based on Condition

html

javascript

css

jquery

toggle