Question

我创建了我的第一个单页项目，所以我希望能够轻松滚动。

HTML：

<nav>
  <ul>
    <li><a href="#top">Top</a></li>
    <li><a href="#middle">Middle</a></li>
    <li><a href="#bottom">Bottom</a></li>
  </ul>
  <span id="hamburger">Hamburger Icon</span>
</nav>

JQuery的：

$("#hamburger").on("click", function() {
  $("nav ul li").toggleSlide("normal");
});

//Snipet code from CSS-Tricks

$(function() {        
        $('a[href*="#"]:not([href="#"])').click(function() {
            //Added code
            if($('nav ul').is(':visible')) {
                $('nav').slideToggle("fast");
            }
            //End added code
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 700);
                    return false;
                }
            }
        });
    });

我坚持使用移动优先模板。基本上，当我点击汉堡图标时，菜单显示为＆＃34; blocks＆＃34;。当我选择一个锚点时，它应该关闭菜单并滚动到锚点。事情似乎很简单，但它并没有像我想的那样运作良好。当我点击锚点时，菜单消失并滚动到我的目的点非常好。但是，现在无论我如何点击＆＃34;汉堡图标＆＃34;，菜单都无法再次打开。

顺便说一句，我刚开始使用JQuery，所以我希望看到明确的指示。谢谢。

Answer 1

对两个动画使用slideToggle。我也只是为nav ul而不是nav ul li设置动画，而不是那种方式你只是动画一个项目而不是多个项目。因此，在您的CSS中，将nav ul更改为display:none而不是nav ul li。此外，可能没有理由检查nav ul是否可见，因为如果点击菜单中的链接，无论您要滚动到某个部分。所以说你可以使用以下代码：

这是一个有效的小提琴Fiddle Demo

$("#hamburger").on("click", function() {
  $("nav ul").slideToggle("normal");
});

//Snipet code from CSS-Tricks

$(function() {        
        $('a[href*="#"]:not([href="#"])').click(function() {

            //Added code
             $('nav ul').slideToggle("fast");

            //End added code
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 700);
                    return false;
                }
            }
        });
    });

如何在滚动到锚点之前关闭导航？

1 个答案: