在外部单击时隐藏下拉菜单

Hide the drop down menu when clicking outside

本文关键字：隐藏下拉菜单单击外部更新时间：2023-09-26

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

我的代码是：

<form>
<div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
        <select>
        </select>
    </div>
    <div class="checkboxes" id="checkboxes">
        @{ 
            if (ViewBag.DataActiveEmployee == null || ((IEnumerable<MvcApplication1.Models.ActiveUsersList>)ViewBag.DataActiveEmployee).Count() == 0)
            {
                //@:<h3>No records were processed.</h3>
            }
            else
            {
                foreach (var usr in ViewBag.DataActiveEmployee)
                {                   
                        <label id="userName">@usr.EmployeeName</label>     
                        <input class="checked" type="checkbox" name="search_emp" id="search_emp" value=@usr.EmployeeName>
                @:
        }
            }
        }
    </div>
</div>

JS

<script>
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的第二个函数内部，因为当我按外部时，什么都没有发生。

请帮忙。

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

更新

$(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 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="multiselect">
    <div class="selectBox">
        <select>
        </select>
    </div>
    <div class="checkboxes" id="checkboxes">
        <label id="userName">Employee 1</label>     
        <input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
        <label id="userName">Employee 1</label>     
        <input class="checked" type="checkbox" name="search_emp" id="emp_1" value="val_1">
    </div>
</div>

检查dom上的目标点击是否是下拉菜单本身或不是

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

它应该起作用。