jquery - 单击页面上的任意位置时jQuery隐藏元素

Question

<div class="buttons">
<a  class="showSingle" target="1">Click 1</a>
<a  class="showSingle" target="2">Click 2</a>
<a  class="showSingle" target="3">Click 3</a>
<a  class="showSingle" target="4">Click 4</a>
</div>

<div id="div1" class="targetDiv">Results from click 1</div>
<div id="div2" class="targetDiv">Results from click 2</div>
<div id="div3" class="targetDiv">Results from click 3</div>
<div id="div4" class="targetDiv">Results from click 4</div>​

jQuery(function(){
        jQuery('.showSingle').click(function(){
              jQuery('.targetDiv').hide();
              jQuery('#div'+$(this).attr('target')).show();
        });
});

​</p>

我找到了很多方法来做到这一点，但似乎无法让它按照我设置的方式工作。当您单击页面上的任何位置而不是单击 .showSingle 或在 .targetDiv 框内时，我需要隐藏 .targetDiv 。

http://jsfiddle.net/XwN2L/1063/

Answer 1

更新：我将它绑定到 html 而不是 body 以修复在内容区域之外的点击。

这是您的功能，只要单击页面正文就会触发：

jQuery('html').click(function(){
    if( !jQuery(event.target).hasClass('targetDiv') ){
        jQuery('.targetDiv').hide();
    }
});

​ 然后，我们还需要添加

e.stopPropagation();
e.preventDefault();

对于您的第一个功能，请防止双重操作。（另外，不要忘记将 e 添加到您的函数参数中）

这是一个小提琴： - http://jsfiddle.net/XwN2L/1065

祝你好运。