Как закрыть div, щелкнув за его пределами

Question

Я сделал поиск по одному из своих сайтов, и когда я нажимаю на свой div, он показывает все категории. Когда вы нажимаете на категорию, то div закрывается сам по себе. Моя проблема здесь в том, что если клиент нажимает на мой div и не хочет нажимать на какую-либо категорию, я хочу, чтобы этот div закрывался всякий раз, когда этот клиент щелкает где-нибудь за его пределами.

Вот мой 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> 

И это мой Javascript, который не работает должным образом, когда я пытаюсь щелкнуть за пределами DIV, чтобы закрыть его:

$('#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 
    }); 
} 

Что она делает это даже когда я нажимаю на категории категорий div #, он уже помещает 1 в console.log. Но мне действительно нужно закрывать его только тогда, когда пользователь выходит за его пределы, когда div открывается, а также класс «открыт».

Answer 1

Вы имели в виду это?

$('#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