javascript - 折叠选择框的下拉菜单
问题描述
我正在处理自定义选择下拉菜单,其中包含我从这个 问题中得到的多项选择的复选框。
问题是一旦下拉展开,当您单击外部任何位置时,它不会像常规选择框中那样折叠。
HTML:
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<span class="caret"> </span>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
CSS:
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
height: 100px;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.caret {
border-top: 4px solid #919da9;
}
JavaScript:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
这是小提琴
仅当您单击选择时它才会折叠,原因可能是它没有任何选项。相反,它有一个输入类型。
解决方案
为. click
_ document
然后在该侦听器中,检查单击是否发生在下拉列表或选项上,如果是,则不执行任何操作(因此用户仍然可以打开下拉列表并选择选项),否则隐藏选项:
var expanded = false,
checkboxes = document.getElementById("checkboxes");
function showCheckboxes() {
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
document.addEventListener("click", function(event) {
// If click on dropdown/options do nothing
if (event.target.closest(".selectBox, #checkboxes")) return;
// Otherwise hide the options
checkboxes.style.display = "none";
});
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
height: 100px;
}
#checkboxes label {
display: block;
}
#checkboxes label:hover {
background-color: #1e90ff;
}
.caret {
border-top: 4px solid #919da9;
}
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<span class="caret"> </span>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</form>
推荐阅读
- javascript - 随机颜色使用说明
- r - 如何删除R数据框中的尾随零
- crystal-reports - 如何在 Crystal Report 中添加超过 1 个选择部分作为数据源
- lua - 这是 Roblox Studio 我想知道如何制作 Leaderstats = Inf
- python - IntegrityError IntegrityError 在 /api/movies/2/rate_movie
- c# - WPF - WrapPanel 子项高度
- html - 从顶部设置子菜单位置
- asp.net-core - 如何覆盖 ef 核心以自动写入数据或记录到文件?
- javascript - 如何从 React Native 中的异步 JS 函数返回变量的值
- java - 带有 Spring Boot 未授权 (401) 响应的 OAuth2