Oculte o menu suspenso ao clicar fora
Eu tenho um menu suspenso com caixas de seleção dentro. Quero fechar a lista suspensa quando os usuários clicarem fora.
Meu código é:
<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" [email protected]>
@:
}
}
}
</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();
});
O problema está na segunda função do JavaScript, porque quando pressiono o botão do lado de fora, nada está acontecendo.
Por favor ajude.