このjQueryコードを使用して、divを切り替え、divの外側のどこかがクリックされた場合にdivを閉じるようにします。
$(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に対してのみ機能し、他の2つのdivはまったくトグルしません。ここにjsFiddleリンクがあります。私は、各欲しいと値。つまり、をオンにしてクリックすると、が非表示になり、表示されます。link togglediv idaltdiv-1link-2div-1div-2
コードを短くするには、これも使用する必要があります
<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();
});
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加