Якорное меню закрывается после нажатия на ссылку - PullRequest
Новая
       55

Якорное меню закрывается после нажатия на ссылку

0 голосов
/ 25 сентября 2019

У меня есть меню, заполненное ссылками, которые я получил: 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 Fiddle: https://jsfiddle.net/1s7qfp9c/

Спасибо,Джош

Ответы [ 2 ]

0 голосов
/ 25 сентября 2019

@ UmurDinçer предложил решение ... просто удалите .cnt__nav из селекторов.Разместив его здесь, я могу выбрать его в качестве ответа.

0 голосов
/ 25 сентября 2019

Когда @ 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");
    }
});

Это устраняет проблему, поскольку он удаляет класс is-open, что приводит к закрытию меню.

...