页面转换导致移动导航不可点击

Question

我在这里有两个主要的jQuery元素。一种是用另一页替换页面内容的页面转换，另一种是智能导航（手机上的移动导航和页面滚动）。

转换和导航在桌面设备上完美工作。问题是，当您跳转到移动导航时，它变得无法点击。

只有在完成页面转换后才能点击，所以我确信它们以某种方式冲突。

活页是这里https://nathanworking.github.io/page-transition-smart-nav/

这两个脚本如下。 注意：我所做的合并这些作品很简单，在我的.js文件中有第一个“智能导航”第二个“动画页面转换”。

如果我只是把这两个错误结合起来，任何人都有想法如何合并这些？

感谢您的帮助！

动画页面过渡

/*----------------------------------- 

    ----- Animated Page transitions ------ 

--------------------------------------*/ 
jQuery(document).ready(function(event){ 
    var isAnimating = false, 
    newLocation = ''; 
    firstLoad = false; 

    //trigger smooth transition from the actual page to the new one 
    $('body').on('click', '[data-type="page-transition"]', function(event){ 
    event.preventDefault(); 
    //detect which page has been selected 
    var newPage = $(this).attr('href'); 
    //if the page is not already being animated - trigger animation 
    if(!isAnimating) changePage(newPage, true); 
    firstLoad = true; 
    }); 

    //detect the 'popstate' event - e.g. user clicking the back button 
    $(window).on('popstate', function() { 
    if(firstLoad) { 
     /* 
     Safari emits a popstate event on page load - check if firstLoad is true before animating 
     if it's false - the page has just been loaded 
     */ 
     var newPageArray = location.pathname.split('/'), 
     //this is the url of the page to be loaded 
     newPage = newPageArray[newPageArray.length - 1]; 

     if(!isAnimating && newLocation != newPage) changePage(newPage, false); 
    } 
    firstLoad = true; 
    }); 

    function changePage(url, bool) { 
    isAnimating = true; 
    // trigger page animation 
    $('body').addClass('page-is-changing'); 
    $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
    }); 
    //if browser doesn't support CSS transitions 
    if(!transitionsSupported()) { 
     loadNewContent(url, bool); 
     newLocation = url; 
    } 
    } 

    function loadNewContent(url, bool) { 
     url = ('' == url) ? 'index.html' : url; 
    var newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     }       

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

智能导航

/*----------------------------------- 

    ----- Smart Navigation ------ 

--------------------------------------*/ 
jQuery(document).ready(function($){ 
    // browser window scroll (in pixels) after which the "menu" link is shown 
    var offset = 300; 

    var navigationContainer = $('#cd-nav'), 
     mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

    //hide or show the "menu" link 
    checkMenu(); 
    $(window).scroll(function(){ 
     checkMenu(); 
    }); 

    //open or close the menu clicking on the bottom "menu" link 
    $('.cd-nav-trigger').on('click', function(){ 
     $(this).toggleClass('menu-is-open'); 
     //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
     mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

    }); 

    function checkMenu() { 
     if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
      navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
       mainNavigation.addClass('has-transitions'); 
      }); 
     } else if ($(window).scrollTop() <= offset) { 
      //check if the menu is open when scrolling up 
      if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
       //close the menu with animation 
       mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
        //wait for the menu to be closed and do the rest 
        mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
       }); 
      //check if the menu is open when scrolling up - fallback if transitions are not supported 
      } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
        mainNavigation.removeClass('is-visible has-transitions'); 
        navigationContainer.removeClass('is-fixed'); 
        $('.cd-nav-trigger').removeClass('menu-is-open'); 
      //scrolling up with menu closed 
      } else { 
       navigationContainer.removeClass('is-fixed'); 
       mainNavigation.removeClass('has-transitions'); 
      } 
     } 
    } 
}); 

与ryancdotnet评论 - 这是正确的jQuery：

/*----------------------------------- 

    ----- Animated Page transitions ------ 

--------------------------------------*/ 
jQuery(document).ready(function(event){ 
    var isAnimating = false, 
    newLocation = ''; 
    firstLoad = false; 

    //trigger smooth transition from the actual page to the new one 
    $('body').on('click', '[data-type="page-transition"]', function(event){ 
    event.preventDefault(); 
    //detect which page has been selected 
    var newPage = $(this).attr('href'); 
    //if the page is not already being animated - trigger animation 
    if(!isAnimating) changePage(newPage, true); 
    firstLoad = true; 
    }); 

    //detect the 'popstate' event - e.g. user clicking the back button 
    $(window).on('popstate', function() { 
    if(firstLoad) { 
     /* 
     Safari emits a popstate event on page load - check if firstLoad is true before animating 
     if it's false - the page has just been loaded 
     */ 
     var newPageArray = location.pathname.split('/'), 
     //this is the url of the page to be loaded 
     newPage = newPageArray[newPageArray.length - 1]; 

     if(!isAnimating && newLocation != newPage) changePage(newPage, false); 
    } 
    firstLoad = true; 
    }); 

    function changePage(url, bool) { 
    isAnimating = true; 
    // trigger page animation 
    $('body').addClass('page-is-changing'); 
    $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
     loadNewContent(url, bool); 
     newLocation = url; 
     $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
    }); 
    //if browser doesn't support CSS transitions 
    if(!transitionsSupported()) { 
     loadNewContent(url, bool); 
     newLocation = url; 
    } 
    } 

    function loadNewContent(url, bool) { 
     url = ('' == url) ? 'index.html' : url; 
    var newSection = 'cd-'+url.replace('.html', ''); 
    var section = $('<div class="cd-main-content '+newSection+'"></div>'); 

    section.load(url+' .cd-main-content > *', function(event){ 
     // load new content and replace <main> content with the new one 
     $('main').html(section); 
     //if browser doesn't support CSS transitions - dont wait for the end of transitions 
     var delay = (transitionsSupported()) ? 1200 : 0; 
     setTimeout(function(){ 
     //wait for the end of the transition on the loading bar before revealing the new content 
     (section.hasClass('cd-about')) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about'); 
     $('body').removeClass('page-is-changing'); 
     $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
      isAnimating = false; 
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'); 
     }); 

// ----- Animated Page transitions ------ 
       //open or close the menu clicking on the bottom "menu" link 
       jQuery(document).ready(function($){ 
        // browser window scroll (in pixels) after which the "menu" link is shown 
        var offset = 300; 

        var navigationContainer = $('#cd-nav'), 
         mainNavigation = navigationContainer.find('#cd-main-nav ul'); 

        //hide or show the "menu" link 
        checkMenu(); 
        $(window).scroll(function(){ 
         checkMenu(); 
        }); 

        //open or close the menu clicking on the bottom "menu" link 
        $('.cd-nav-trigger').on('click', function(){ 
         $(this).toggleClass('menu-is-open'); 
         //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) 
         mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); 

        }); 

        function checkMenu() { 
         if($(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { 
          navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
           mainNavigation.addClass('has-transitions'); 
          }); 
         } else if ($(window).scrollTop() <= offset) { 
          //check if the menu is open when scrolling up 
          if(mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions')) { 
           //close the menu with animation 
           mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ 
            //wait for the menu to be closed and do the rest 
            mainNavigation.removeClass('is-visible is-hidden has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
           }); 
          //check if the menu is open when scrolling up - fallback if transitions are not supported 
          } else if(mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions')) { 
            mainNavigation.removeClass('is-visible has-transitions'); 
            navigationContainer.removeClass('is-fixed'); 
            $('.cd-nav-trigger').removeClass('menu-is-open'); 
          //scrolling up with menu closed 
          } else { 
           navigationContainer.removeClass('is-fixed'); 
           mainNavigation.removeClass('has-transitions'); 
          } 
         } 
        } 
       }); 
// ----- Animated Page transitions ------ 

     if(!transitionsSupported()) isAnimating = false; 
     }, delay); 

     if(url!=window.location && bool){ 
     //add the new page to the window.history 
     //if the new page was triggered by a 'popstate' event, don't add it 
     window.history.pushState({path: url},'',url); 
     } 

     }); 
    } 

    function transitionsSupported() { 
    return $('html').hasClass('csstransitions'); 
    } 
}); 

Answer 1

移动导航似乎总是失败后第一次点击。在调试时，看起来您正在移除菜单并重新添加菜单，但点击事件之后未被连线。

具体来说，这部分似乎并没有被再被解雇：

$('.cd-nav-trigger').on('click',......