点击外部时隐藏下拉菜单 [英] Hide the drop down menu when clicking outside

问题描述

我有一个带有复选框的下拉菜单。当用户点击外部时，我想关闭下拉菜单。

我的代码是：

 < form> 
< div class =multiselect> 
< div class =selectBoxonclick =showCheckboxes（）> 
< select> 
< / select> 
< / div> 
< div class =checkboxesid =checkboxes> 
 @ {
 if（ViewBag.DataActiveEmployee == null ||（（IEnumerable< MvcApplication1.Models.ActiveUsersList>）ViewBag.DataActiveEmployee）.Count（）== 0）
 {
 // @：< h3>没有记录被处理。< / h3> 
 
} 
 else 
 {
 foreach（ViewBag.DataActiveEmployee中的var usr）
 {
< label id =userName> ; @ usr.EmployeeName< /标签> 
< input class =checkedtype =checkboxname =search_empid =search_empvalue =@usr.EmployeeName> 
 @：
} 
} 
} 
 
< / div> 
< / div> 
  

strong>

 < script> 
 var expanded = false; 
 checkboxes.style.display =none; 
函数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' （）'（'''''''''''''''''''''''''''' 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> <选择> < /选择> < / DIV> < div class =checkboxesid =checkboxes> < label id =userName> Employee 1< / label> < input class =checkedtype =checkboxname =search_empid =emp_1value =val_1> < label id =userName> Employee 1< / label> < input class =checkedtype =checkboxname =search_empid =emp_1value =val_1> < / div>< / div>  

I have a dropdown menu with checkboxes inside. I want to close the dropdown when the users click outside.

My code is:

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

The problem is inside the second function of JavaScript because when I press outside, nothing is happening.

Please help.

解决方案

Try using the event.target to handle click events:

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 }

<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>

这篇关于点击外部时隐藏下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！