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 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之外的任何位置时关闭

2 个答案: