代码之家 › 专栏 › 技术社区 › Josh Rodgers

单击链接后关闭定位菜单

hamburger-menu click menu function javascript

Josh Rodgers · 技术社区 · 5 年前

我有一个满是锚定链接的菜单,我从: 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");
        }
    });
}

<!-- 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/

谢谢,

0 回复 | 直到 5 年前

Josh Rodgers 5 年前

当@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');
    });
});

然后我修改了JS,在第5行,我告诉它删除 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");
    }
});

这修复了问题,因为它正在删除 是开放的 类,这将导致菜单关闭。

Josh Rodgers 5 年前

@乌默德想出了解决办法…把它去掉 .cnt__nav 从选择器。贴在这里,这样我就可以选择它作为答案。