javascript - 全屏覆盖在页面加载时打开

Question

我不确定我的功能是否有误，或者我在某处输入错误，但每次我打开我的 html 页面时，nav 都会打开。

该功能正确关闭并在覆盖层上的任意位置单击后正确打开，但我遇到的唯一问题是，当我加载页面时，nav 已经打开。

//Toggle of burgermenu
$(document).ready(function() {
  $(".burger a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });
});
$('.overlay').on('click', function() {
  $(".overlay").fadeToggle(200);
  $(".burger a").toggleClass('btn-open').toggleClass('btn-close');
  open = false;
});  

//toggle transparency on scroll
$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('opaque');
    } else {
        $('.navbar-default').removeClass('opaque');
    }
});

/* NAVBAR */

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
  padding: 15px;
  margin-top: 0px;
  margin-left: 10px;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  border: none;
}

.navbar-default {
  background-color: rgba(0, 0, 0, 0.0);
  height: 50px;
  transition: background-color .5s ease 0s;
}

.navbar-default .navbar-toggle {
  border-color: rgba(221, 221, 221, 0);
}

.navbar-header {
  float: none;
}

.navbar-default.opaque {
  height: 50px;
  background-color: rgba(51, 51, 61, 0.8);
  transition: background-color .5s ease 0s;
  border-radius: 0;
}

#nav-container {
  padding: 0px;
}

#burgerimg {
  margin: 0px;
  margin-right: 10px;
  margin-top: 10px;
}


/*Overlay*/

.overlay {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: #33333d;
  z-index: 99;
}

a.headlink {
  font-size: 26px;
  opacity: 0.3;
}

a.headlink :hover {
  opacity: 1;
}

.wrap {
  color: #e9e9e9;
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.wrap ul.wrap-nav {
  text-transform: capitalize;
  padding: 150px 0px 100px;
}

.wrap ul.wrap-nav li {
  display: inline-block;
  vertical-align: top;
  width: 15%;
}

.wrap ul.wrap-nav li a {
  color: #fff;
  display: block;
  text-decoration: none;
  transition-property: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -webkit-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
}

.wrap ul.wrap-nav li a:hover {
  opacity: 1;
}

.wrap ul.wrap-nav ul li {
  display: block;
  width: 100%;
  color: #e9e9e9;
}

.wrap ul.wrap-nav ul li a {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

.wrap ul.wrap-nav ul li a {
  color: #fff;
  opacity: 0.3;
}

.wrap ul.wrap-nav ul li a:hover {
  color: #34B484;
  opacity: 1;
}

.wrap img {
  margin: 0px;
  margin-bottom: 30px;
}

@media screen and (max-width:48em) {
  .wrap ul.wrap-nav>li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #575757;
  }
  .wrap ul.wrap-nav {
    padding: 30px 0px 0px;
  }
  nav ul {
    opacity: 0;
    visibility: hidden;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container" id="nav-container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
      <div class="burger">
        <a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
      </div>
    </div>
  </div>
</nav>

<div class="overlay">
  <div class="wrap">
    <ul class="wrap-nav">
      <li>
        <a href="#" class="headlink"><img src="images/prod-icon.png">
          <BR>Products</a>
        <ul>
          <li><a href="#">Product Brief</a></li>
          <li><a href="#">Getting Started</a></li>
          <li><a href="#">Technology</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!--END NAVBAR-->

<h1>WEBPAGE AND ETC</h1>

Answer 1

将 display: none 添加到 overlay - 请参见下面的演示:

//Toggle of burgermenu
$(document).ready(function() {
  $(".burger a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });
});
$('.overlay').on('click', function() {
  $(".overlay").fadeToggle(200);
  $(".burger a").toggleClass('btn-open').toggleClass('btn-close');
  open = false;
});

//toggle transparency on scroll
$(window).scroll(function() {
  if ($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/ {
    $('.navbar-default').addClass('opaque');
  } else {
    $('.navbar-default').removeClass('opaque');
  }
});

/* NAVBAR */

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  width: auto;
  padding: 15px;
  margin-top: 0px;
  margin-left: 10px;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
  border: none;
}

.navbar-default {
  background-color: rgba(0, 0, 0, 0.0);
  height: 50px;
  transition: background-color .5s ease 0s;
}

.navbar-default .navbar-toggle {
  border-color: rgba(221, 221, 221, 0);
}

.navbar-header {
  float: none;
}

.navbar-default.opaque {
  height: 50px;
  background-color: rgba(51, 51, 61, 0.8);
  transition: background-color .5s ease 0s;
  border-radius: 0;
}

#nav-container {
  padding: 0px;
}

#burgerimg {
  margin: 0px;
  margin-right: 10px;
  margin-top: 10px;
}


/*Overlay*/

.overlay {
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: #33333d;
  z-index: 99;
  display: none;
}

a.headlink {
  font-size: 26px;
  opacity: 0.3;
}

a.headlink :hover {
  opacity: 1;
}

.wrap {
  color: #e9e9e9;
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.wrap ul.wrap-nav {
  text-transform: capitalize;
  padding: 150px 0px 100px;
}

.wrap ul.wrap-nav li {
  display: inline-block;
  vertical-align: top;
  width: 15%;
}

.wrap ul.wrap-nav li a {
  color: #fff;
  display: block;
  text-decoration: none;
  transition-property: all .2s linear 0s;
  -moz-transition: all .2s linear 0s;
  -webkit-transition: all .2s linear 0s;
  -o-transition: all .2s linear 0s;
}

.wrap ul.wrap-nav li a:hover {
  opacity: 1;
}

.wrap ul.wrap-nav ul li {
  display: block;
  width: 100%;
  color: #e9e9e9;
}

.wrap ul.wrap-nav ul li a {
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

.wrap ul.wrap-nav ul li a {
  color: #fff;
  opacity: 0.3;
}

.wrap ul.wrap-nav ul li a:hover {
  color: #34B484;
  opacity: 1;
}

.wrap img {
  margin: 0px;
  margin-bottom: 30px;
}

@media screen and (max-width:48em) {
  .wrap ul.wrap-nav>li {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #575757;
  }
  .wrap ul.wrap-nav {
    padding: 30px 0px 0px;
  }
  nav ul {
    opacity: 0;
    visibility: hidden;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container" id="nav-container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"><img src="images/Logo.png" align="left" alt="logo"></a>
      <div class="burger">
        <a class="btn-open" href="#"><img id="burgerimg" align="right" src="images/burger.png"></a>
      </div>
    </div>
  </div>
</nav>

<div class="overlay">
  <div class="wrap">
    <ul class="wrap-nav">
      <li>
        <a href="#" class="headlink"><img src="images/prod-icon.png">
          <BR>Products</a>
        <ul>
          <li><a href="#">Product Brief</a></li>
          <li><a href="#">Getting Started</a></li>
          <li><a href="#">Technology</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!--END NAVBAR-->

<h1>WEBPAGE AND ETC</h1>