divの外をクリックして閉じる方法

Question

自分のウェブサイトの1つを検索し、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> 

そして、これは私がそれを閉じるためのdivの外側をクリックしてみたときに正常に動作していない私のJavascriptを、次のとおりです。

$('#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＃wrap-categoriesをクリックしても、console.logにはすでに1が入ります。しかし、実際には、divを開いたときにユーザーが外に出てきて、クラスが「開かれている」ときに閉じてください。

Answer 1

あなたはこれを意味しましたか？身体に `）（` .clickを置くが、その後、あなたは、すべてのdiv要素が開いているかどうかを確認するためにクリックしテストする必要があり、クライアントWASN -

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