Question

我有一个充满锚链接的菜单，该菜单来自以下位置：https://codepen.io/jpag82/pen/jAZjvV-我的代码如下：

<div class="cnt__nav">
      <nav>
           <ul>
                <li><a href="#head" class="active">Home</a></li>
                <li><a href="#main">About</a></li>
                <li><a href="#foot">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
           </ul>
      </nav>
 </div>

我将此菜单与一个平滑的滚动脚本结合了起来，该脚本来自：https://jsfiddle.net/cse_tushar/Dxtyu/141/

这两个脚本都可以正常工作，除了使用锚链接之外，我都没有涉及任何一个脚本。我想做的是关闭菜单或单击菜单项时运行toggleClass('is-open')。

我在JS上添加了一条我认为可以正常工作的行，但是当我添加平滑滚动时，此功能停止了工作（仅在.cnt__nav a选择器上）：

$(document).ready(function() {
      $('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() {
           $('.nav-trigger').toggleClass('is-open');
           $('.cnt__nav').toggleClass('is-open');
           $('.cnt__nav a').toggleClass('is-open');
      });
});

我猜测平滑滚动中的click函数将覆盖链接的行为，导致$('.cnt__nav a').toggleClass('is-open');停止工作。

有没有一种方法可以将这两个脚本网格化，因此当单击链接时，菜单会关闭？

当前的JS：

$(document).ready(function() {
    $('#cnt__nav-trigger, .cnt__nav, .cnt__nav a').click(function() {
        $('.nav-trigger').toggleClass('is-open');
        $('.cnt__nav').toggleClass('is-open');
        $('.cnt__nav a').toggleClass('is-open');
    });
});




$(document).ready(function () {
    $(document).on("scroll", onScroll);

    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");

        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');

        var target = this.hash,
        menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('.cnt__nav a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('.cnt__nav ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else {
            currLink.removeClass("active");
        }
    });
}

当前的HTML：

<!-- MENU -->
<div class="cnt__nav">
    <nav>
        <ul>
            <li><a href="#head" class="active">Home</a></li>
            <li><a href="#main">About</a></li>
            <li><a href="#foot">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</div>

<!-- NAV TRIGGER -->
<div id="cnt__nav-trigger">
    <div class="nav-trigger">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

JS小提琴：https://jsfiddle.net/1s7qfp9c/

谢谢，
乔什

Answer 1

在@UmurDinçer编写解决方案时，我想到了自己的一个解决方案...

删除$('.cnt__nav a').toggleClass('is-open');，它类似于：

$(document).ready(function() {
    $('#cnt__nav-trigger, .cnt__nav').click(function() {
        $('.nav-trigger').toggleClass('is-open');
        $('.cnt__nav').toggleClass('is-open');
    });
});

然后，我在第5行修改了JS，我告诉它删除了is-open类-看起来像这样：

$('.cnt__nav a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('.cnt__nav a').removeClass("is-open active");
            currLink.addClass("active");
    }
    else {
        currLink.removeClass("active");
    }
});

这已解决此问题，因为它删除了is-open类，该类导致菜单关闭。

Answer 2

@UmurDinçer提出了解决方案...只需从选择器中删除.cnt__nav。将其张贴在这里，以便我选择它作为答案。

单击链接后关闭锚菜单

2 个答案: