javascript - 如何通过单击外部来关闭 div

Question

这个问题已经有答案了:

Use jQuery to hide a DIV when the user clicks outside of it (40 个回答)

已关闭 6 年前。

我搜索了我的一个网站，当我按下我的 div 时，它会显示所有类别。当您单击某个类别时，该 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 #wrap-categories，它也已经在 console.log 中放入了 1。但只有当用户在 div 打开时在其外部单击时，我才真正需要关闭它，并且还具有“opened”类。

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