Wie man ein div schließt, indem man es außerhalb klickt

Question

Ich habe nach einer meiner Webseiten gesucht und wenn ich auf div drücke, werden alle Kategorien angezeigt. Wenn Sie auf eine Kategorie klicken, schließt sich das div von selbst. Mein Problem hier ist, wenn der Kunde auf mein div klickt und nicht auf irgendeine Kategorie klicken möchte, möchte ich dieses div geschlossen werden, wenn dieser Kunde irgendwo außerhalb davon klickt.

Hier ist mein HTML:

<div id="wrap-categories"> 
    <p>Choose a category</p> 
    <img src="..." alt="white-arrow"> 
    <ul class="" style="display: none;"> 

    <li data-value="1">Category 1</li> 
    <li data-value="2">Category 2</li> 
    <li data-value="3">Category 3</li> 

    </ul> 
</div> 

Und das ist mein Javascript, das nicht richtig funktioniert, wenn ich versuche, außerhalb des div klicken, um es zu schließen:

$('#wrap-categories > p').click(function() { 
    $('#wrap-categories > ul').addClass('opened').show(); 
}); 

if($('#wrap-categories > ul').hasClass('opened')) { 
    $(document).click(function(e) { 
    console.log(1); 
    // close div here 
    }); 
} 

es Was tut, ist selbst wenn ich auf die div # -Wrap-Kategorien klicke, wird bereits eine 1 in console.log abgelegt. Aber ich muss es wirklich nur schließen, wenn der Benutzer beim Öffnen des Divs außerhalb davon klickt, und hat auch die Klasse "geöffnet".

Answer 1

Meintest du das?

$('#wrap-categories').click(function(e) { 
    e.stopPropagation(); 
}); 
$('#wrap-categories').click(function() {   
    $('#wrap-categories > ul').addClass('opened').show(); 
}); 

$(document).click(function() {  
    $('#wrap-categories > ul').removeClass('opened').hide(); 
}); 

jsfiddle