は、複数のdivをトグルしても近いのdivが

Question

をクリックされた以外の場所を私はdiv要素を切り替えても、どこにでもいる場合div要素がクリックされた外のdivを閉じることにするために、このjQueryのコードを使用する場合：

$(document).ready(function(){ 
    $('html').click(function(){ 
    $('div').hide(); 
}); 

$('a').click(function(e){ 
    e.stopPropagation(); 
}); 

$('div').click(function(e){ 
    e.stopPropagation(); 
}); 

$('a').click(function(){ 
    $('div').toggle(); 
}); 

}) 

しかし、私は持っています私はこの機能を実行する必要があり、多くのdivはので、私はこれでした：

<a href="javascript:;" class="tgl" id="link-1" alt="div-1">LINK 1</a> 
<a href="javascript:;" class="tgl" id="link-2" alt="div-2">LINK 2</a> 
<a href="javascript:;" class="tgl" id="link-3" alt="div-3">LINK 3</a> 
<div id="div-1"></div> 
<div id="div-2"></div> 
<div id="div-3"></div> 
$(document).ready(function(){ 
    $('html').click(function(){ 
    $('#div-1').hide(); 
    $('#div-2').hide(); 
    $('#div-3').hide(); 
}); 

$('#link-1').click(function(e){ 
    e.stopPropagation(); 
}); 
$('#link-2').click(function(e){ 
    e.stopPropagation(); 
}); 
$('#link-3').click(function(e){ 
    e.stopPropagation(); 
}); 

$('#div-1').click(function(e){ 
    e.stopPropagation(); 
}); 
$('#div-2').click(function(e){ 
    e.stopPropagation(); 
}); 
$('#div-3').click(function(e){ 
    e.stopPropagation(); 
}); 

$('.tgl').click(function(){ 
    altDiv = $(this).attr('alt'); 
    $('#'+altDiv).toggle(); 
}); 

}) 

をしかし、それは他の二つのdiv要素は、ここでも、すべての でトグルしていないjsFiddleリンクがあり、最初のdivのために動作します。私はそれぞれlinktoggledividをaltの値にします。これは問題ではない、すべてのコードが$(document).ready(function() {});の中にあったということでした

Answer 1

を達成しようとしているものも、あなたがこの

<a href="javascript:;" class="tgl" id="link-1" alt="div-1">LINK 1</a> 
<a href="javascript:;" class="tgl" id="link-2" alt="div-2">LINK 2</a> 
<a href="javascript:;" class="tgl" id="link-3" alt="div-3">LINK 3</a> 
<div class="divClass" id="div-1"></div> 
<div class="divClass" id="div-2"></div> 
<div class="divClass" id="div-3"></div> 
$(document).ready(function(){ 
    $('html').click(function(){ 
     $('#div-1').hide(); 
     $('#div-2').hide(); 
     $('#div-3').hide(); 
    }); 

    $('.divClass').click(function(e){ 
     e.stopPropagation(); 
    }); 

    $('.tgl').click(function(e){ 
     altDiv = $(this).attr('alt'); 
     $('#'+altDiv).toggle(); 
     e.stopPropagation(); 
    }); 

}) 

Answer 2

を表示されますdiv-1が上トグルされるとlink-2がクリックされた場合、div-1は隠されdiv-2されることを意味します。このjsFiddleを参照してください。altDivが正しい名前で表示されています。最初のロードでdivが非表示になっており、対応するリンクがクリックされたときに表示されることがわかります。

コードを再フォーマットして、読みやすく、繰り返し可能なコードを削除しました。

あなたのコードを短くするために