我目前正在使用一个非常基本的标题（我最终希望它在打开和折叠时进行动画处理，并使汉堡菜单对关闭图标进行动画处理）。标头具有响应性，用户可以在点击关闭图标时将其折叠。每当点击标题以外的地方时，如何使它折叠：
到目前为止，这就是我的工作。
body,
html {
max-width: 100%;
padding: 0vw;
margin: 0vw;
}
.header {
background-color: #ffffff;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 10vh;
z-index: 1;
border-bottom: solid;
display: flex;
justify-content: space-between;
}
.headerfill {
height: 10vh;
border: none;
}
.header-container {
width: 100%;
height: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
margin-left: auto;
margin-right: auto;
}
.logo-container {
float: left;
width: 40%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
.navigation-container {
width: 60%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
@media only screen and (max-width: 500px) {
.logo-container {
float: left;
width: 80%;
padding-left: 1vh;
display: flex;
flex-flow: row nowrap;
justify-content: left;
}
}
@media only screen and (max-width: 500px) {
.navigation-container {
width: 20%;
display: flex;
flex-flow: row nowrap;
//justify-content: space-evenly;
margin: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.space-evenly {
justify-content: space-evenly;
}
}
.logo {
height: 8vh;
max-width: 40%;
padding-top: 1.5vh;
padding-bottom: 0.5vh;
padding-left: 4vh;
display: block;
object-fit: contain;
}
@media only screen and (max-width: 500px) {
.logo {
height: 8vh;
max-width: 80%;
padding-top: 1.5vh;
padding-bottom: 0.5vh;
padding-left: 2vh;
display: block;
object-fit: contain;
}
}
img {
-webkit-user-drag: none;
}
.nav {
font-family: 'Roboto', serif;
font-size: 2vw;
text-align: center;
margin-top: auto;
margin-bottom: auto;
color: #000000;
padding-left: auto;
padding-right: auto;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
@media only screen and (max-width: 500px) {
.nav {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 2vh;
margin-bottom: auto;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
line-height: 1em;
object-fit: contain;
text-decoration: none;
}
}
.nav:hover {
color: #096e67;
}
a:link {
color: #000000;
text-decoration: none;
}
h1 {
font-family: 'Roboto', serif;
font-size: 4vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 4vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
@media only screen and (max-width: 500px) {
h1 {
font-family: 'Roboto', serif;
font-size: 8vw;
text-align: left;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
padding-left: 2vh;
padding-right: 2vh;
padding-bottom: 0.5vh;
line-height: 1em;
}
}
nav {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-right: auto;
text-align: right;
}
nav a {
display: block;
}
i {
display: none !important;
}
@media (max-width: 500px) {
nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
}
nav.active {
display: block;
background-color: aqua;
border-top: solid;
border-bottom: green solid 0.2vh;
padding: 1vh;
padding-bottom: 2vh;
}
i {
display: block!important;
margin: 5px;
}
}
.fa {
font-size: 6vh;
padding-top: 2vh;
padding-bottom: 2vh;
padding: 0vh;
}<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>Website Header</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./stylesheet.css">
</head>
<body>
<header>
<div class="header">
<div class="header-container">
<div class="logo-container">
<img class="logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo">
</div>
<div class="navigation-container space-evenly">
<nav>
<a href="#">
<p class="nav">Page1</p>
</a>
<a href="#">
<p class="nav">Page2</p>
</a>
<a href="#">
<p class="nav">Page3</p>
</a>
<a href="#">
<p class="nav">Page4</p>
</a>
</nav>
<i class="fa fa-bars"></i>
</div>
</div>
</div>
</header>
<script>
menu = document.querySelector('nav');
document.querySelector('i')
.addEventListener('click', e => {
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
})
</script>
<div class="header-fill">
</div>
有很多。我只是想这样，如果用户决定点按其他位置，则不必单击关闭按钮，以防他们决定坚持该页面。
如果有人能弄清楚如何添加引导程序以扩展和折叠标题（在移动视图中）以及为关闭/汉堡菜单设置动画，则奖励。
卡住了， 预先感谢。
答案 0 :(得分：0)
尝试
$(document).click(function() {
$("nav").removeClass("active")
})
$("nav").click(function(e) {
e.stopPropagation()
return false
})
$(".fa.fa-bars").click(function(e) {
e.stopPropagation()
$("nav").toggleClass("active")
})
答案 1 :(得分：0)
这应该可以解决您的问题，让我知道结果
let button =document.querySelector('body').addEventListener('click', buttonClick);
function buttonClick(e)
{
//to view current target on console
console.log(e.target);
//checks if you've clicked out side the nav
if(!e.target.classList.contains('navigation-container'))
{
//checks if nav is open
if(document.querySelector('nav').classList.contains('active'))
{
console.log('now closing nav');
//from your code this should close the nav but adjust to close the nav if this dose not work
menu.classList.toggle('active')
document.querySelector('header i').classList.toggle('fa-bars')
document.querySelector('header i').classList.toggle('fa-times')
}
}
}