切换多个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();
});

})

但是我有很多需要运行这个函数的did，所以我这样做了：

<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 toggle都具有alt值的div id。这意味着，如果div-1被打开，link-2被单击，div-1将被隐藏，div-2将出现。

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

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

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

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