关闭外部点击切换

时间:2012-07-31 14:06:25

标签: javascript jquery onclick toggle forceclose

我仍然是javascript和JQuery的新手......如何通过在切换区域外单击来关闭此div(我不希望用户必须使用关闭按钮)

代码如下所示:

 function toggleDiv(divId) {
 $("#"+divId).toggle();
 }

 function showonlyone(thechosenone) {
 $('.newnote').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(0);
      }
      else {
           $(this).hide(0);
      }
 });
 }

,html看起来像这样

<div class="note">

     <a id="myHeader1" href="javascript:showonlyone('newnote1');" >
          <img src="images/SN_NotesPage_14.png">
     </a>      

     <div class="newnote" id="newnote1">
          <a>
               <img src="images/SN_NotesPage_16.png">
          </a>
     </div>
</div>

谢谢

1 个答案:

答案 0 :(得分:0)

我通常做的是在文档正文中添加一个单击事件监听器来关闭叠加层。为防止通过单击覆盖关闭覆盖,我向覆盖添加第二个单击事件侦听器,其中包含ev.stopPropagation();

所以使用jQuery看起来像:

$(document.body).bind('click.closeNote', function() {
    $('.newnote').hide();
});
$('.newnote').bind('click.closeNote', function(ev) {
    ev.stopPropagation();
});

另一种方法是添加覆盖整个页面的透明div(使用比注释更低的zIndex)。然后,您可以向此div添加一个单击事件侦听器,以关闭注释。

编辑: 请注意,上面的示例不是非常高效,因为它在每次单击时都会执行选择器。只需在显示注释时绑定此事件,并在关闭时解除绑定。