单击页面其他位置时，折叠移动标题 [英] Collapse mobile header when somewhere else on the page is clicked

问题描述

我目前正在使用一个非常基本的标题(我最终希望它在打开和折叠时进行动画处理，并使汉堡菜单对关闭图标进行动画处理).标题是响应式的，用户可以在点击关闭图标时将其折叠.每当点击标题以外的其他地方时，如何使它折叠:

I'm currently working with a really basic header (I eventually want it to animate when opening and collapsing and have the hamburger menu animate to/from the close icon). The header is responsive and the user can collapse it when tapping the close icon. How can I make it collapse whenever somewhere other than the header is tapped:

到目前为止，这就是我正在使用的东西.

Here's what I'm working with so far.

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>

有很多.我只是想这样，如果用户决定点按其他位置，则不必单击关闭按钮，以防他们决定坚持该页面.

There's quite a lot. I'd just like it so if the user decides to tap somewhere else they don't have to click the close button in case they decide to stick with that page.

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

Bonus if someone can figure out how to add bootstrap for expansion and collapse of the header (in mobile view) and to animate the close/hamburger menu.

卡住了， 预先感谢.

推荐答案

这应该可以解决您的问题，让我知道结果

This should solve you problem let me know the outcome

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

这篇关于单击页面其他位置时，折叠移动标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！