切换多个 div 并在单击 div 之外的任何位置时关闭

Question

我使用此 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，其他两个 div 甚至根本不切换这是一个 jsFiddle link。我想要每个 link toggle div id 和 alt 值。这意味着如果打开 div-1 并单击 link-2，则 div-1 将被隐藏，而 div-2 将显示

Answer 1

问题是并非所有代码都在 $(document).ready(function() {}); 中。请查看此 jsFiddle，它将显示 altDiv 正在获取正确的名称并正在显示。您可以看到，在初始加载时，div 是隐藏的，并在单击相应链接时显示。

我还重新格式化了您的代码，使其更具可读性并删除了可重复的代码。

此外，我已经删除了 $('html').click()，因为它不是您要实现的目标所必需的

Answer 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();
    });

})

切换多个 div 并在单击 div 之外的任何位置时关闭

Toggling multiple divs and also close when anywhere outside the div is clicked

jquery

toggle