Скрыть раскрывающееся меню при нажатии снаружи
У меня есть выпадающее меню с флажками внутри. Я хочу закрыть выпадающий список, когда пользователи нажимают снаружи.
Мой код:
<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, потому что когда я нажимаю снаружи, ничего не происходит.
Пожалуйста помоги.