代码之家  ›  专栏  ›  技术社区  ›  matt

jQuery:hide()框,而不是元素本身?

  •  3
  • matt  · 技术社区  · 12 年前

    我有一个 <a href="#" id="btn">Show Box</a> 在我的DOM中的某个位置。此外,我还有一个 div#overlay 默认情况下设置为 display:none; .

    // Toggle Overlay
    $('#btn').click(function(e) {
        e.preventDefault();
        $('#overlay').toggle();
    })
    
    $('body').not('#btn, #overlay').click(function() {
        if ( $('#overlay').is(':visible') ) $('#overlay').hide();
    });
    

    为什么不起作用?我想要 #btn 单击时切换()覆盖。但是,当覆盖可见并且我单击文档上的任何位置时(除了 #顺便说一句 本身或 #overlay )我希望覆盖也被隐藏起来。

    2 回复  |  直到 12 年前
        1
  •  11
  •   techfoobar    12 年前

    您正在捕获 click body 它本身就是 从不 #btn #overlay ,因此无法按预期工作。相反,你需要检查的是 event.target

    $('body').click(function(e) {
        var target = $(e.target);
        if(!target.is('#btn') && !target.is('#overlay')) {
           if ( $('#overlay').is(':visible') ) $('#overlay').hide();
        }
    });
    
        2
  •  4
  •   Anujith    12 年前

    使用 event.target.id 用于比较单击区域的 id

    $('body').click(function(e) {
       if(e.target.id != 'btn' && e.target.id != 'overlay')
          if ( $('#overlay').is(':visible') ) $('#overlay').hide();
    })