单击外部时隐藏下拉菜单

我有一个带有复选框的下拉菜单。 我想在用户点击外面时关闭下拉列表。

我的代码是：

 
 
   
 
 @{ if (ViewBag.DataActiveEmployee == null || ((IEnumerable)ViewBag.DataActiveEmployee).Count() == 0) { //@:
No records were processed.
 } else { foreach (var usr in ViewBag.DataActiveEmployee) { @usr.EmployeeName  @: } } } 
  

JS

  var expanded = false; checkboxes.style.display = "none"; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } } $('multiselect').click(function () { $("#checkboxes").hide(); }); 

问题出在JavaScript的第二个function内部，因为当我在外面按下时，什么也没发生。

请帮忙。

Answer 1

尝试使用event.target来处理点击事件：

UPDATE

 $(document).on('click', '.multiselect .selectBox', function(e) { e.stopImmediatePropagation(); $('#checkboxes').show(); }); $('body').on('click', function(e) { if (e.target.id != 'checkboxes' && $(e.target).closest('#checkboxes').length == 0) { $('#checkboxes').hide(); } }); 

 #checkboxes, .multiselect { padding:15px; border:1px solid #d8d8d8; } .selectBox { display: inline; } #checkboxes { display:none } 

  
 
   
 
 Employee 1  Employee 1  
  

Answer 2

检查目标点击dom是否是下拉列表本身

 $(document).on("click", function(event){ var $trigger = $(".checkboxes"); if($trigger !== event.target && !$trigger.has(event.target).length){ $(".checkboxes").hide(); } }); 

它应该工作。