如何通过关闭屏幕上的任何位置来关闭导航栏

Question

我知道已经有类似的问题了，但我面临着一个奇怪的问题。我可以通过点击导航栏外部来关闭导航栏，但之后导航栏汉堡图标没有响应。当我使用CCD_ 1。

目前我正在使用

document.getElementById("div-1").addEventListener("click", function () {});，

但有了这个，我无法通过点击我的div外部来关闭它。如果我给我的身体一个id，我将面临与上面相同的问题。您将能够通过点击关闭导航栏，直到有一个a，因为这是"a"；div-1"；，但不能低于它们。

打开控制台并切换汉堡包图标，然后尝试通过单击第一个div来关闭导航栏，导航栏复选框不会返回到错误状态

tl；dr-我如何通过点击导航栏外部来关闭导航栏，并重复操作。

谢谢！！

$('#menu-btn').change(function() {
if (this.checked) {
document.getElementById("div-1").addEventListener("click", function() {
// window.addEventListener('click',()=>{
// $(document).click(function (event) {
document.getElementById("menu-btn").checked = false;
document.getElementById("myHeader").classList.remove("someClass");
});
window.addEventListener('scroll', () => {
document.getElementById("menu-btn").checked = false;
document.getElementById("myHeader").classList.remove("someClass");
});
}
});

/* body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
} */

/* header */
.header {
/* background-color: rgba(250, 246, 246, 0.6); */
/* box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3); */
position: fixed;
top: 0%;
width: 100%;
/* height: 10%; */
z-index: 33;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
/* background-color: rgba(250, 246, 246, 0.4); */
/* background-color: #fff; */
}
.header li a {
display: block;
padding: 20px 20px;
/* border-right: 1px solid #f4f4f4; */
color: white;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
/* border-bottom: 2px white solid; */
/* background-color: #f4f4f4; */
/* color: grey; */
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
.header .logo-down {
display: block;
float: left;
font-size: 2em;
padding: 100px 20px;
text-decoration: none;
}

/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}

/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: white .2s ease-out;
width: 18px;
background-color: white;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
background-color: white;
}

/* .header .menu-icon .navicon:before,
.header .menu-icon .navicon:after,
.header .menu-icon .navicon{
background-color: black;
} */
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}

/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
max-height: 250px;
background-color: white;
}
.header .menu-btn:checked~.header {
background-color: red;
}
.header .menu-btn:checked~.menu-icon .navicon {
background: transparent;
/* background-color: #000; */
}
.header .menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
background-color: black;
}
.header .menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
background-color: black;
}
.header .menu-btn:checked~.menu li a {
color: #333;
}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
.is-sticky {
background-color: white;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
transition: 1s ease-in;
margin-top: -1.2%;
}
.is-sticky-sm {
background-color: white;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
transition: 1s ease-in;
/* margin-top: -1.2%; */
}
.is-sticky-transparent {
background-color: none;
transition: .5s ease-in;
}
@media(min-width:565px) {
.is-sticky-transparent {
max-height: 10vh;
}
}
.someClass {
background-color: white;
transform: .5s ease;
}
.hovertowhite::after {
content: '';
display: block;
width: 0;
height: 2px;
/* color: honeydew; */
background: white;
transition: width .3s;
}
.hovertowhite:hover::after {
width: 100%;
}
.hovertowhite {
/* color: white; */
text-decoration: none;
}
.hovertolight:hover {
color: grey !important;
}

/* qwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */
body {
background-color: royalblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header " id="myHeader">
<a href="" class="logo" id="logo-manip">CSS Nav</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon" id="menu-icon"></span></label>
<ul class="menu" id="menu-manip">
<li><a href="#work" class="hovertowhite" id="nav-text1">one</a></li>
<li><a class="hovertowhite" id="nav-text2">two</a></li>
<li><a class="hovertowhite" id="nav-text3">three</a></li>
<li><a href="#contact" class="hovertowhite" id="nav-text4">four</a></li>
</ul>
</header>
<div id="div-1">
a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a
<br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> <br> a <br> a <br> a <br>
</div>


<script>
$("#menu-btn").click(function(){
console.log($(this)[0].checked);
});
if($("#menu-btn").checked){
console.log('ll');
}
</script>


<script>
$('#menu-btn').click(function() {
$("#myHeader").toggleClass("someClass");
});
</script>

<!-- NAVBAR STUFF -->
<script>
window.addEventListener('scroll', () => {
const myBackground = document.getElementById('myHeader');
const logo = document.getElementById('logo-manip');
const menu = document.getElementById('menu-manip');
const ham = document.getElementById('menu-icon');
const texts1 = document.getElementById('nav-text1');
const texts2 = document.getElementById('nav-text2');
const texts3 = document.getElementById('nav-text3');
const texts4 = document.getElementById('nav-text4');
var styleElem1 = document.head.appendChild(document.createElement("style"));
var styleElem2 = document.head.appendChild(document.createElement("style"));
var styleElem3 = document.head.appendChild(document.createElement("style"));
if ($(window).width() > 767) {
if (window.pageYOffset > 550) {
myBackground.classList.add("is-sticky");
logo.style.paddingTop = "8px";
menu.style.paddingTop = "8px";
texts1.classList.add("hovertolight");
texts2.classList.add("hovertolight");
texts3.classList.add("hovertolight");
texts4.classList.add("hovertolight");
texts1.style.color = "black";
texts2.style.color = "black";
texts3.style.color = "black";
texts4.style.color = "black";
styleElem1.innerHTML = ".header .menu-icon .navicon {background: black;}";
styleElem2.innerHTML = ".header .menu-icon .navicon:before {background: black;}";
styleElem3.innerHTML = ".header .menu-icon .navicon:after {background: black;}";
} else {
myBackground.classList.remove("is-sticky");
myBackground.classList.add("is-sticky-transparent");
logo.style.marginTop = "0px";
menu.style.marginTop = "0px";
texts1.classList.remove("hovertolight");
texts2.classList.remove("hovertolight");
texts3.classList.remove("hovertolight");
texts4.classList.remove("hovertolight");
texts1.style.color = "white";
texts2.style.color = "white";
texts3.style.color = "white";
texts4.style.color = "white";
styleElem1.innerHTML = ".header .menu-icon .navicon {background: white;}";
styleElem2.innerHTML = ".header .menu-icon .navicon:before {background: white;}";
styleElem3.innerHTML = ".header .menu-icon .navicon:after {background: white;}";
}
} else {
if (window.pageYOffset > 230) {
myBackground.classList.add("is-sticky-sm");
logo.style.paddingTop = "8px";
menu.style.bottom = "1px";
texts1.style.color = "black";
texts2.style.color = "black";
texts3.style.color = "black";
texts4.style.color = "black";
styleElem1.innerHTML = ".header .menu-icon .navicon {background: black;}";
styleElem2.innerHTML = ".header .menu-icon .navicon:before {background: black;}";
styleElem3.innerHTML = ".header .menu-icon .navicon:after {background: black;}";
} else {
myBackground.classList.remove("is-sticky-sm");
myBackground.classList.add("is-sticky-transparent");
logo.style.marginTop = "0px";
menu.style.marginTop = "0px";
styleElem1.innerHTML = ".header .menu-icon .navicon {background: white;}";
styleElem2.innerHTML = ".header .menu-icon .navicon:before {background: white;}";
styleElem3.innerHTML = ".header .menu-icon .navicon:after {background: white;}";
}
}
});
</script>

Answer 1

以下是我为您提供的解决方案：

1. 您应该将"div-1"的高度设置为100vh。不需要更多
2. 或者，您可以将除标头之外的所有元素包装到容器div中，并将其高度设置为100vh

发生的情况是，没有指定"div-1"的高度，因此它只获取其中元素("a"元素(的高度。该区域的其余部分既不计入"div-1"元素，也不计入正文。因此javascript/jquery无法访问该区域。正因为如此，您的eventlistener只能使用"div-1"可用的高度。如果增加元素的高度，那么javascript将能够覆盖eventlistener的所有区域。

这是我给你的答案。快乐的设计。

--编辑的部分--将这些行添加到您的第二个脚本("NAVBAR Stuff"上面的脚本(

$("#parent").click(function(){ console.log($("#menu-btn")[0].checked = false); }); 
// it will look like this 
<script> 
$("#menu-btn").click(function(){ console.log($(this)[0].checked); }); 
$("#parent").click(function(){ console.log($("#menu-btn")[0].checked = false); });
if($("#menu-btn").checked){ console.log('ll'); } 
</script>