JQUERY：如果用户在其外部单击，则关闭 div答案

【问题标题】：JQUERY: Close a div if user clicks outside of itJQUERY：如果用户在其外部单击，则关闭 div
【发布时间】：2011-09-27 14:43:31
【问题描述】：

我有一个隐藏的 div，当用户点击标题（通知）时会打开它。默认情况下，“子面板” div 是隐藏的，但是使用 jquery 时，它会在用户单击“通知”一词时切换打开/关闭。

如何修改我的 jquery，以便如果用户在打开的 div（子面板）之外单击，这也会触发子面板关闭/隐藏？

<div class="notiftitle" id="notiftitle">
<a href="#" class="alerts">Notifications</a>
 <div class="subpanel">
    <div id="title">New Notifications</div>
    <ul>
      <li>Data</li>
    </ul>
  </div>
</div>

$(文档).ready(函数(){ //每次点击切换“打开”和“关闭”状态然后向上/向下滑动（取决于打开/关闭状态） $(".alerts").click(function(){ $(this).toggleClass("notiftitleactive"); $(this).toggleClass("active").next().slideToggle(50); 返回假； //防止浏览器跳转到链接锚点 }); });

【问题讨论】：

您最好使用 evt.preventDefault() 而不是返回 false：stackoverflow.com/questions/1357118/…

标签： jquery

【解决方案1】：

听起来您需要“outerClick”事件。 ouerClick jQuery plugin by Jon Kassen.

【讨论】：

【解决方案2】：

你需要使用blur事件：

$(".alerts").blur(function(){
    $(this).toggleClass("notiftitleactive");
    $(this).toggleClass("active").next().slideToggle(50);
});

【讨论】：

【解决方案3】：

试试mouseout方法。

【讨论】：

我不希望它在鼠标离开时关闭，除非有人点击离开它