单击页面上其他位置时折叠移动标题

我正在使用一个非常基本的标题(我最终希望它在打开和折叠时动画,并让汉堡包菜单为关闭图标设置动画)。 标题是响应式的,用户可以在点击关闭图标时将其折叠。 如果点击标题以外的其他位置,我怎么能让它崩溃:

到目前为止,这是我正在使用的内容。

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; } 
    Website Header       
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') })

有很多。 我只是喜欢它,所以如果用户决定点击其他地方,他们不必点击关闭按钮,以防他们决定坚持该页面。

如果有人可以弄清楚如何添加引导程序以扩展和折叠标题(在移动视图中)并为关闭/汉堡包菜单设置动画,则可以获得奖励。

相当困难,提前谢谢。

试试这个

 $(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") }) 

这应该解决你的问题让我知道结果

 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') } } }