javascript - 使用 jQuery 单击 anchor 标记时 div 内容不隐藏

Question

我在使用导航栏时遇到问题。在移动设备上，我希望在单击列表项后隐藏导航栏的内容。只有当您将窗口从大调整为小时才会出现此问题；当屏幕尺寸已经很小时，它不会发生。所以你必须点击“展开代码片段”才能看到这个问题。我认为我的 javaScript 代码有问题，但我不确定是什么。谢谢!

$(document).ready(function() {

  var menuStatus = true;
  var sections = $('section');
  var nav = $('nav');
  //smooth scroll
  $("nav,#arrow").find('a').on('click', function() {
    var el = $(this),
      id = el.attr('href');

    $('html, body').animate({
      scrollTop: $(id).offset().top
    }, 500);
  });

  //hide the mobile nav after a link is clicked
  if ($(window).width() < 900) {
    $("nav li a").on('click', function() {
      $(".menu").hide();
      $('nav input:checkbox:checked').prop('checked', false);
    });

    $("nav input").on('click', function() {
      $(".menu").show();
    });
  }

  //show desktop nav when the screen is at least 900px
  $(window).on('resize', function() {
    var win = $(this);
    if (win.width() > 900) {
      $(".menu").show();
    }
  });
});

nav {
  position: absolute;
  width: 100%;
  z-index: 10;
}

nav img {
  height: 150px;
}

nav ul {
  list-style: none;
  overflow: hidden;
}

.nav__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

nav li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color: #fff;
  font-size: 110%;
  text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

nav ul li a:hover {
  color: #5f3917;
  background-color: #fbd802;
  cursor: pointer;
}

a.active {
  color: #1CAB1D;
}

nav .menu {
  clear: both;
  max-height: 0;
  -webkit-transition: max-height .2s ease-out;
  -o-transition: max-height .2s ease-out;
  transition: max-height .2s ease-out;
}

nav .menu-icon {
  margin-top: 5px;
  cursor: pointer;
  float: right;
  padding: 28px 20px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/*close icon*/

nav .menu-icon .navicon {
  background: #b32025;
  display: block;
  height: 2px;
  position: relative;
  -webkit-transition: background .2s ease-out;
  -o-transition: background .2s ease-out;
  transition: background .2s ease-out;
  width: 18px;
}


/*menu icon bottom and top lines*/

nav .menu-icon .navicon:before,
nav .menu-icon .navicon:after {
  background: #b32025;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  width: 100%;
}

nav .menu-icon .navicon:before {
  top: 5px;
}

nav .menu-icon .navicon:after {
  top: -5px;
}


/* menu btn */

nav .menu-btn {
  display: none;
}


/*height of vertical menu*/

nav .menu-btn:checked~.menu {
  max-height: 300px;
}

nav .menu-btn:checked~.menu-icon .navicon {
  background: transparent;
}


/*when clicked animate*/

nav .menu-btn:checked~.menu-icon .navicon:before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}


/*when clicked animate*/

nav .menu-btn:checked~.menu-icon .navicon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
nav .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
  top: 0;
}


/* MEDIA QUERIES */

@media only screen and (max-width: 730px) {
  nav li:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(252, 65, 65, 0.2);
  }
  nav ul {
    padding: 0;
  }
  .nav__wrapper {
    display: inline;
  }
  .container {
    padding: 100px 20px;
  }
}

@media only screen and (max-width: 730px) {
  nav {
    background-color: #fbd802;
  }
  nav img {
    height: 70px;
  }
  nav li:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid rgba(252, 65, 65, 0.2);
  }
  nav ul {
    padding: 0;
  }
  nav li {
    text-align: center;
  }
  .nav__container {
    display: block;
  }
}

@media only screen and (min-width: 730px) {
  ul {
    display: flex;
  }
  nav .menu {
    max-height: none;
  }
  nav .menu-icon {
    display: none;
  }
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 40px;
}

section {
  height: 100vh;
}

#home {
  background: red;
}

#aboutUs {
  background: blue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <section id="home">
    <nav>
      <div class="nav__container">
        <img id="logo" src="https://via.placeholder.com/150" alt="logo">
        <input class="menu-btn" type="checkbox" id="menu-btn" />
        <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
        <ul class="menu">
          <li><a href="#aboutUs">about us</a></li>
          <li><a href="#menu">menu</a></li>
          <li><a href="#gallery">gallery</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </div>
    </nav>
  </section>

  <section id="aboutUs">

  </section>



</body>

</html>

Answer 1

我在运行您的脚本时发现以下错误:Uncaught TypeError: Cannot read property 'top' of undefined。

有两种方法可以解决这个问题。添加 href 中列出的所有元素而不仅仅是 #aboutUs，或者将您的 JS 更改为以下内容:

$("nav,#arrow").find('a').on('click', function() {
    var elm_id = $(this).attr('href');
    var section = $(elm_id);

    if(section.length) {
        $('html, body').animate({
            scrollTop: section.offset().top
        }, 500);
    }
});

-- 编辑--

完整代码:

$(document).ready(function() {
    // smooth scroll
    $("nav, #arrow").on('click', 'a', function() {
        var elm_id = $(this).attr('href');
        var section = $(elm_id);

        if(section.length) {
            $('html, body').animate({
                scrollTop: section.offset().top
            }, 500);
        }
    });

    // Handle Mobile Menu
    var $window = $(window);
    var $menu = $(".menu");
    $("nav li a").on('click', function() {
        if ($window.width() < 900) {
            $menu.hide();
            $('nav input:checkbox:checked').prop('checked', false);
        }
    });
    $("nav input").on('click', function() {
        if ($window.width() < 900) {
            $menu.show();
        }
    });
    // show desktop nav when the screen is at least 900px
    $window.on('resize', function() {
        if ($window.width() > 900) {
            $menu.show();
        } else {
            $menu.hide();
        }
    });
});