菜单图标切换问题 JQuery

Question

我获得了一个切换控件，在单击时在菜单图标和 X 之间进行动画处理。它还提供了一个叠加导航。

问题是：当您在叠加导航上单击任何 link 时，它不会 change/toggle X 返回到默认菜单图标。

在下面的代码片段中，我添加了 $('.cd-menu-icon').toggleClass('is-clicked'); $('.cd-header').toggleClass('menu-is-open');（在第 33、34 行）以初始设置控件的切换状态。

jQuery(document).ready(function($){
    //if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well
    var MQL = 1170;

    //primary navigation slide-in effect
    if($(window).width() > MQL) {
        var headerHeight = $('.cd-header').height();
        $(window).on('scroll',
        {
            previousTop: 0
        }, function () {
            var currentTop = $(window).scrollTop();
            //check if user is scrolling up
            if (currentTop < this.previousTop ) {
                //if scrolling up...
                if (currentTop > 0 && $('.cd-header').hasClass('is-fixed')) {
                    $('.cd-header').addClass('is-visible');
                } else {
                    $('.cd-header').removeClass('is-visible is-fixed');
                }
            } else {
                //if scrolling down...
                $('.cd-header').removeClass('is-visible');
                if( currentTop > headerHeight && !$('.cd-header').hasClass('is-fixed')) $('.cd-header').addClass('is-fixed');
            }
            this.previousTop = currentTop;
        });
    }

    //open/close primary navigation
    $('.cd-primary-nav-trigger').on('click', function(){
        $('.cd-menu-icon').toggleClass('is-clicked');
        $('.cd-header').toggleClass('menu-is-open');

        //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
        if( $('.cd-primary-nav').hasClass('is-visible') ) {
            $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').removeClass('overflow-hidden');
            });
        } else {
            $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
                $('body').addClass('overflow-hidden');
            });
        }
    });
});

希望有人能提供帮助。

重现：（使用JsFiddle Example）

打开菜单（点击'hamgburger'图标框区域）
在叠加层出现时单击其上的任意 link。（即“1”、“2”、“3”、“4”）
结果：叠加层关闭，但菜单图标没有切换回来。

Answer 1

一个快速的解决方案是添加一个新的点击侦听器来侦听对您的链接的点击

$('.nav-overlay').click(function() {
    $('.cd-menu-icon').toggleClass('is-clicked');
});

在你原来的 fiddle 中，汉堡包图标只有在被直接点击时才会改变，因为点击监听器只附加到那个元素

Modified Fiddle

Answer 2

我认为您已经在 <script> 标签 （第 253 行） 中的 1, 2, 3, 4 链接上实现了自定义点击事件 HTML 部分.

只需将 <script> 标记替换为以下内容：

<script>
  $('.cd-primary-nav a').on('click', function(){
  $('.cd-menu-icon').removeClass('is-clicked');
  $('.cd-header').removeClass('menu-is-open');
  $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
    $('body').removeClass('overflow-hidden');
  });
  });
</script>

JSFiddle：https://jsfiddle.net/c9dj010v/

菜单图标切换问题 JQuery

Menu icon toggle issue JQuery

html

javascript

css

jquery

icons