jQuery Показать/скрыть элемент на основе условия

Question

Хорошо. У меня есть код ниже. То, что я хочу выполнить, заключается в том, что, щелкнув ссылку, Show/Hide (toggle) очень NEXT div с именем класса subsec & Скрыть все остальные divs с именем класса subsec. Кроме того, при щелчке в любом месте за пределами ссылки & Открыто div (div.subsec), скрыть последнее (div.subsec).

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

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

 
});

.subsec{ 
 
    display: none; 
 
} 
 

 
.mainDivs{ 
 
    float: left; 
 
\t 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).

Что такое лучший способ достичь? Заранее спасибо. Ура !!

Answer 1

Вы можете прослушивать документ 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; 
 
\t 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 2

Вам нужно настроить таргетинг на все остальные элементы subsec и скрыть их. Вы можете сделать это путем ориентации всех элементов с классом 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 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; 

}