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; 
 
\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（DIVを開設）。

達成する最良の方法は何ですか？前もって感謝します。乾杯！！

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

他のすべてのサブセット要素をターゲットにして非表示にする必要があります。

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

こんにちは、次のコードを試してください：あなたはsubsecクラスにすべての要素を標的とし:notセレクタを使用してsubsecターゲットをフィルタリングすることによってそれを行うことができます。

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; 

}