在移动视图中单击锚标记时如何关闭导航栏

Question

我正在努力找出如何在移动视图中关闭导航栏，当我单击锚标记时，它只会滚动到单页网站上的相关部分。例如，当在移动视图中并且当我用户单击锚标记时，我希望它滚动到正确的部分并关闭。我正在努力寻找答案。我是 javascript 新手，因此将不胜感激任何帮助。谢谢

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll 
      to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: youngheart;
  src: url(fonts/Young\ Heart.ttf);
}


/* Global Preset */


/* Navigation Start */

nav {
  height: 80px;
  background: black;
}

nav img {
  width: 200px;
  position: absolute;
  top: 17px;
  left: 12%;
}

nav ul {
  float: right;
  margin-right: 25px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 15px;
}

nav ul li a {
  position: relative;
  color: white;
  font-size: 25px;
  padding: 5px 0;
  text-transform: uppercase;
  font-family: youngheart;
}

nav ul li a:before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s linear;
}

nav ul li a:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

label #btn,
label #cancel {
  color: white;
  font-size: 30px;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width: 1118px) {
  nav img {
    left: 8%;
  }
}

@media (max-width: 944px) {
  nav img {
    left: 6%;
    top: 20px;
    width: 130px;
  }
  nav ul li a {
    font-size: 17px;
  }
}

@media (max-width: 860px) {
  label #btn {
    display: block;
  }
  ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: black;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    font-size: 20px;
  }
  #check:checked~ul {
    left: 0;
  }
  #check:checked~label #btn {
    display: none;
  }
  #check:checked~label #cancel {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <input type="checkbox" id="check">
  <label for="check">
      <i class="fa fa-bars" id="btn"></i>
      <i class="fa fa-times" id="cancel"></i>
  </label>
  <img src="images/logo.png">
  <ul>
    <li>
      <a href="index.html">Home</a>
    </li>
    <li>
      <a href="#about">About Us</a>
    </li>
    <li>
      <a href="#services">Services</a>
    </li>
    <li>
      <a href="#shop">Shop</a>
    </li>
    <li>
      <a href="#meet">Meet Our Team</a>
    </li>
  </ul>
</nav>

Answer 1

您可以使用以下代码创建css 类调用（例如）“hide-mobile”：

.hide-mobile {display:block !important;}
@media (max-width: 860px){
    .hide-mobile {display:none !important;}
}

然后在你的script:

$("a").on('click', function(event) {
  if (this.hash !== "") {
    event.preventDefault();
    var hash = this.hash;
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function() {
      window.location.hash = hash;
      $("#btn").addClass("hide-mobile");  //THIS LINE
    });
  }
});

有了这个#btn（或任何你想隐藏的元素）将在滚动后隐藏，而!important在mediaqueries之外，你将确保在不使用移动设备时始终可见。

当您希望导航面板在移动设备上再次显示时，只需添加另一个脚本以稍后删除该类。例如是scrollTop = 0删除类

已编辑： 如果您想在没有回滚到顶部时再次显示该元素，则此代码可能有效：

$(window).scroll(function(){
        if ($(window).scrollTop() = 0){
            $('#btn').removeClass('hide-mobile');
        }
    });