Question

我有一个简单的菜单，当我单击“ li”项时，页面会自动滚动到该部分。我要做的是在滚动完成后关闭我的“ dropMenu-nav”。我搜索了一些常见问题，但无法使其正常运行。这是我的HTML：

<div class="dropMenu-nav">
  <ul>
    <li><a href="#home" class="nav-link">HOME</a></li>
    <li><a href="#about" class="nav-link">ABOUT</a></li>
    <li><a href="#resume" class="nav-link">RESUME</a></li>
    <li><a href="#blog" class="nav-link">BLOG</a></li>
    <li><a href="#contact" class="nav-link">CONTACT</a></li>
  </ul>
</div>

还有我的JS代码：

$(document).ready(function(){
  let scrollNav = $('.scroll');
  scrollNav.click(function(e){
    e.preventDefault();
    $('body, html').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000);
    *$('.dropMenu-nav').animate({
      opacity: 0;
    }, 2000);*
  });
  $(window).scroll(function() {
    let scrollBarLocation = $(this).scrollTop();
    scrollLink.each(function(){
      let sectionOffset = $(this.hash).offset().top;
      if (sectionOffset <= scrollBarLocation){
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
      }
    });
  })
});

滚动部分效果很好，但是滚动后我找不到隐藏菜单的方法。我也没有在控制台上看到任何错误，老实说，我也不知道我在哪里做错了。我将不胜感激，在此先感谢您的所有帮助。

Answer 1

诀窍是在2.5%的{{1}}回调中执行菜单折叠逻辑：

complete

Answer 2

如果要在滚动后关闭，请关闭菜单，然后在滚动完成后评估该代码。请参阅jQuery.animate文档中的complete参数。

$('html,body').animate({
  scrollTop: scrollTop: $(this.hash).offset().top
}, 1000, function () {
  $('body').removeClass('nav-is-open')
})

使用JQuery / JS在ScrollTop之后隐藏菜单

2 个答案: