Wie kann ich ein div mit jquery verstecken/schließen, wenn $ (document) angeklickt wird?

Question

Ich habe ein einfaches Dropdown-Menü, und ich möchte dieses Menü automatisch schließen/ausblenden, wenn auf einen Bereich außerhalb davon geklickt wird. Ich kann mir keinen einfachen Weg vorstellen, dies zu tun. Würde eine Lösung/Beispiel auf Jfiddle wenn möglich lieben.

JQuery:

$('.micropostOptions').on('click',function(){ 
    var postMenu = $(this).find('.postMenu'); 

    if(postMenu.is(':hidden')){ 
     $('.postMenu').hide(); 
     $('.micropostOptions').removeClass("postMenuHoverState"); 
     postMenu.show(); 
     $(this).hide().addClass('postMenuHoverState').show(60); 

    }else{ 
     postMenu.hide() ; 
     $(this).removeClass("postMenuHoverState"); 
    } 


}); 

SCSS:

.micropostOptions { 
    position:absolute; 
    height:17px; 
    width:17px ; 
    top:5px; 
    right:5px; 
    background:white url("/assets/arrow_down_alt1.png") no-repeat; 
    background-position:0px 0px; 

     &:hover { 
      background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
      background-position:0px 0px; 
      cursor:pointer !important; 

     } 

} 

.postMenuActivate { 
    display:block; 
} 

.postMenuHoverState { 
    background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
    background-position:0px 0px; 
    cursor:pointer !important; 
} 

.postMenu { 
    position:absolute; 
    display:none; 
    padding-bottom:20px; 
    background-color:white !important; 
    border:1px solid $main-background-color; 
    height:163px; 
    width:170px; 
    top:18px; 
    right:2px; 
    -webkit-box-shadow: 0 10px 6px -6px #777; 
    -moz-box-shadow: 0 10px 6px -6px #777; 
    box-shadow: 0 10px 6px -6px #777; 
    color:gray; 
    z-index:3000; 

     li { 

     font-size:12px; 
     height:33px; 
     background-color:white !important; 

      a span { 
       float:left; 
       width:160px; 
       height:33px; 
       line-height:33px; 
       padding-left:10px; 
       color:gray; 

        &:hover { 
        background-color:#4D90FE !important; 
        color:white; 
        // #DD4B39,#D14836 
        } 
      } 

      &:hover { 
      background-color:#4D90FE; 
      color:white; 

      } 
     } 

     .deletePost { 
      //position:relative; 
      padding-top:0px !important; 
      padding-left:0px !important; 
      height:39px; 
      width:170px; 
      text-align:center; 
      padding-bottom:7px; 
      border-bottom:1px solid #d9d9d9; 

       a { 

        span { 
        float:left; 
        padding-left:0px !important;        
         height:46px !important; 
         width:170px !important; 
         line-height:46px; 
        } 
       } 

       a span:hover { 
        background-color:#DD4B39 !important; 
        color:white; 
       // #DD4B39,#D14836 
       } 
     } 

     .reportAbuse { 
      border-top:1px solid #d9d9d9; 

       a span:hover { 
        background-color:gray !important;; 
       } 

     } 

} 

HTML:

<nav class="micropostOptions"> 
    <ul class="postMenu"> 
     <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %> 
     </li> 
     <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li> 
     <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li> 
     <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li> 
     <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li> 
    </ul> 
    </nav> 

Mit freundlichen Grüßen

Answer 1

versuchen Sie dies:

// Fast way to attach handlers to body 
$(document.body).click(function(ev) { 
    // Get the clicked element through ev.target 
    var clickedElement = $(ev.target); 
    // If the element is a visible .postMenu, then ignore. 
    if(clickedElement.is('.microPostOptions:visible')) { 
     return; 
    } 
    // If not then slide it up. Note else not needed as we returned early. 
    $('.microPostOptions').slideUp(); 
}); 

Answer 2

Etwas wie folgt aus:

$('html').click(function() { 
$('.postMenu').hide(); 
}); 

Answer 3

Grundsätzlich müssen Sie etwas tun:

http://jsfiddle.net/49N8s/1/

$(document).on('click', function(e){ 
    var menu = $('.postMenu'); 
    var target = $(e.target); 
    if(menu.has(target).length > 0 || menu.is(target)){ 
     return false; 
    } 
    menu.hide(); 
});