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

Question

我有一个隐藏的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>

$(document).ready(function(){

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $(".alerts").click(function(){
        $(this).toggleClass("notiftitleactive");
        $(this).toggleClass("active").next().slideToggle(50);
        return false; //Prevent the browser jump to the link anchor
    });


});

Answer 1

您需要使用blur事件：

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

Answer 2

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

Answer 3

尝试mouseout方法。