JQUERY：ユーザーがその外をクリックするとdivを閉じる

Question

ユーザーがタイトル（通知）をクリックすると表示される非表示のdivがあります。 「サブパネル」divはデフォルトでは隠されていますが、jqueryを使用すると、ユーザが「Notifications」という単語をクリックすると開いたり閉じたりします。

jqueryを変更して、開いているサブパネルのサブパネルの外側をクリックすると、サブパネルが閉じる/非表示になるようにするにはどうすればよいですか？

<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

あなたが "outerClick" -eventを必要とするようですね。 ouerClick jQuery plugin by Jon Kassen。

Answer 2

mouseout方法を試してみてください。

Answer 3

あなたはblurイベントを使用する必要があります。

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