javascript - 单击页面上的其他位置时折叠移动标题
问题描述
我目前正在使用一个非常基本的标题(我最终希望它在打开和折叠时动画,并让汉堡菜单动画到/从关闭图标)。标题是响应式的,用户可以在点击关闭图标时折叠它。每当点击标题以外的某个地方时,如何使其崩溃:
这是我目前正在使用的。
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>
有很多。我只是喜欢它,所以如果用户决定点击其他地方,他们不必单击关闭按钮,以防他们决定坚持使用该页面。
如果有人能弄清楚如何添加引导程序以扩展和折叠标题(在移动视图中)并为关闭/汉堡菜单设置动画,则奖励。
卡住了,先谢谢了。
解决方案
这应该可以解决你的问题让我知道结果
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')
}
}
}
推荐阅读
- scala - 如何根据其键的类型投射地图?
- r - 绘制整个栅格堆栈时添加栅格值
- python - 在多列中合并具有相同值的两个数据框
- javascript - 图像资产 vue 2 在构建时不显示
- xamarin.forms - 如何将内容页面(xaml)加载到 xamarin.Forms 中的另一个页面(xaml),但保持页眉和页脚相同(如 Xamarin.Android 中的选项卡)
- javascript - 如何在 JavaScript 模块中使用 AWS?
- python - matplotlib箭头的connectionstyle和width、headwidth不兼容?
- javascript - 如何在带有 highcharts 的实时图表上更改 xasis 上的时间?
- c++ - 我的 std::lock 实现中的总线错误
- r - 如何从集合中选择最小的数字子集加起来成为目标?