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

我找到了很多方法来做到这一点，但似乎无法让它按照我设置的方式工作。当你点击页面上的任何地方时，我需要.targetDiv隐藏，而不是点击.showSingle或.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

祝你好运。

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

1 个答案: