divの表示/非表示を切り替える

Question

例えば、button1をクリックすると、content1が表示され、button2をクリックするとcontent1が閉じ、content2が表示されます。 。このコードで、これまで動作します ：（content1が既に開いている場合、私はそのボタンをクリックしたときにそれを切り替える：私は何をしようとしている

$("#buttons a").click(function(e){ 
    e.preventDefault(); 
    var toShow = $(this).attr('href'); 
    $(".togg").fadeOut(); 
    $(toShow).fadeIn(); 
    }); 

JSFiddle は、この機能を維持するが、いくつかのものを追加することですボタン1）をクリックし、content1 divの外側をクリックするとそれを切り替えます。要するに、私はdivを除いてどこかをクリックしてそれをトグルしたいと思う。

Answer 1

あなたは、クリックが要素の上または要素の外側にあるかどうかを確認したいと、そのためにあなたは、あなただけの種類を達成するための動的なセレクタを作成する必要がnodeNameまたはtagNameまたはid

$(document).click(function(e) { 
    //Check the element is none of the DIVS which we wants prevent. 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
    { 
     //Hide the content div which is visible now. 
     $('div.togg:visible').hide(); 
    } 
}); 

をチェックする必要がありますダイナミックトグル機能のhref`属性 `に関連するクラス名を書くのは良いアイデアではありません

$("#buttons a").click(function(e){ 
    var selector = $('.'+$(this).attr('id')); 
    selector.toggle(); 
    $('div.togg').not(selector).hide(); 
}); 

$("#buttons a").click(function(e){ 
 
    var selector = $('.'+$(this).attr('id')); 
 
    selector.toggle(); 
 
    $('div.togg').not(selector).hide(); 
 
}); 
 
$(document).click(function(e) { 
 
    //Check the element is none of the DIVS which we wants prevent. 
 
    if(e.target.id != "content1" && e.target.id != "content2" && e.target.id != "content3") 
 
    { 
 
     //Hide the content div which is visible now. 
 
     $('div.togg:visible').hide(); 
 
    } 
 
});

.content1 {display:none;} 
 
.content2 {display:none;} 
 
.content3 {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <a href="#" id="content1">Div 1</a> 
 
    <a href="#" id="content2">Div 2</a> 
 
    <a href="#" id="content3">Div 3</a> 
 
</div> 
 
<div> 
 
    <div class="content1 togg">1111</div> 
 
    <div class="content2 togg">2222</div> 
 
    <div class="content3 togg">3333</div> 
 
</div>