我已经使用CSS和纯JavaScript构建了一个下拉菜单。当有人检查输入元素时，下拉菜单将切换到正是我想要的。我现在遇到的只有JavaScript部分。当有人没有点击下拉菜单本身和标签时（因为输入/标签适用于纯CSS），该复选框应该仅被取消选中。外面的任何东西都会触发这个功能。只在简单的JavaScript！
function validate(e){
var e = event || window.event, // make this works in different browsers
checkNavbar = document.getElementById("navbar-dropdown-toggle"), // input
checkboxNavbar = document.getElementById("checkboxNavbar"), // label
storeDropdown = document.getElementById("storeDropdown"); // unordered list dropdown-menu
if (checkNavbar.checked == true && e.target != checkboxNavbar) { //check if checbox is already checked
console.log("checkbox is checked");
if(e.target != storeDropdown) {
console.log("you do not click on ul and label");
if(checkNavbar.checked == false) { // if it is clicked outside
checkNavbar.checked = false; // if that is true we should uncheck the checkbox
return false;
}
}
}
};
document.addEventListener("click", validate);.dropdown-label-navbar {
height: 55px;
width: 100%;
display: block;
position: absolute;
}
.navbar-dropdown {
opacity: 0;
position: absolute;
margin-left: -999px;
}
.dropdown-menu {
width: 100%;
background: white;
position: absolute;
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
box-sizing: border-box;
}
.navbar-dropdown:checked ~ .dropdown-menu {
display: block;
transition: max-height 1s;
max-height: 300px;
opacity: 1.0;
border-top: 1px solid #828282;
border-bottom: 1px solid #828282;
}
.dropdown-label-navbar {
height: 25px;
width: 150px;
display: block;
position: absolute;
border: 1px solid red;
}<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
<label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>
<a href="#99" class="main-links">Store</a>
<ul class="dropdown-menu" id="storeDropdown">
<div class="entire-block">
<div class="dropdown-image-block">
</div>
<li class="list-of-dropdown">
<div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div>
<div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div>
<div class="dropdown-list"><a href="audio.html">Audio</a></div>
</li>
</div>
</ul>
答案 0 :(得分：0)
一些问题：
checkNavbar checkNavbar.checked == false永远不会满足，因为您已经要求checkNavbar.checked == true event未在e = event || window.event中定义。它应该是e。如果你想避免点击下拉列表执行代码来关闭它，那么最容易在该元素上捕获click事件并停止它的传播。这样，它永远不会到达您的文档级点击处理程序。
以下是更正后的代码：
function validate(e){
var e = e || window.event, // make this works in different browsers
checkNavbar = document.getElementById("navbar-dropdown-toggle"),
checkboxNavbar = document.getElementById("checkboxNavbar");
if ([checkNavbar, checkboxNavbar].indexOf(e.target) < 0 && checkNavbar.checked) {
checkNavbar.checked = false;
return false;
}
};
document.addEventListener("click", validate);
var storeDropdown = document.getElementById("storeDropdown");
storeDropdown.addEventListener("click", function(e) {
e.stopPropagation();
});.dropdown-label-navbar {
height: 55px;
width: 100%;
display: block;
position: absolute;
}
.navbar-dropdown {
opacity: 0;
position: absolute;
margin-left: -999px;
}
.dropdown-menu {
width: 100%;
background: white;
position: absolute;
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
box-sizing: border-box;
}
.navbar-dropdown:checked ~ .dropdown-menu {
display: block;
transition: max-height 1s;
max-height: 300px;
opacity: 1.0;
border-top: 1px solid #828282;
border-bottom: 1px solid #828282;
}
.dropdown-label-navbar {
height: 25px;
width: 150px;
display: block;
position: absolute;
border: 1px solid red;
}<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
<label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>
<a href="#99" class="main-links">Store</a>
<ul class="dropdown-menu" id="storeDropdown">
<div class="entire-block">
<div class="dropdown-image-block">
</div>
<li class="list-of-dropdown">
<div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div>
<div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div>
<div class="dropdown-list"><a href="audio.html">Audio</a></div>
</li>
</div>
</ul>
或者你可以对所有三个元素使用stop-bubbling方法：
var checkNavbar = document.getElementById("navbar-dropdown-toggle"),
checkboxNavbar = document.getElementById("checkboxNavbar"),
storeDropdown = document.getElementById("storeDropdown");
function closeDropDown(){
checkNavbar.checked = false;
}
function stopBubblingWhenChecked(e) {
if (checkNavbar.checked) e.stopPropagation();
}
[checkNavbar, checkboxNavbar, storeDropdown].forEach(function(elem) {
elem.addEventListener("click", stopBubblingWhenChecked);
});
document.addEventListener("click", closeDropDown);.dropdown-label-navbar {
height: 55px;
width: 100%;
display: block;
position: absolute;
}
.navbar-dropdown {
opacity: 0;
position: absolute;
margin-left: -999px;
}
.dropdown-menu {
width: 100%;
background: white;
position: absolute;
left: 0;
right: 0;
max-height: 0;
overflow: hidden;
box-sizing: border-box;
}
.navbar-dropdown:checked ~ .dropdown-menu {
display: block;
transition: max-height 1s;
max-height: 300px;
opacity: 1.0;
border-top: 1px solid #828282;
border-bottom: 1px solid #828282;
}
.dropdown-label-navbar {
height: 25px;
width: 150px;
display: block;
position: absolute;
border: 1px solid red;
}<input id="navbar-dropdown-toggle" type="checkbox" class="navbar-dropdown"/>
<label class="dropdown-label-navbar" id="checkboxNavbar" for="navbar-dropdown-toggle"></label>
<a href="#99" class="main-links">Store</a>
<ul class="dropdown-menu" id="storeDropdown">
<div class="entire-block">
<div class="dropdown-image-block">
</div>
<li class="list-of-dropdown">
<div class="dropdown-list"><a href="case-and-protection.html">Cases and Protection</a></div>
<div class="dropdown-list"><a href="power_and_cable.html">Power and Cables</a></div>
<div class="dropdown-list"><a href="audio.html">Audio</a></div>
</li>
</div>
</ul>