的jQuery - >後如預期

窗口後調整我的滾動功能，因爲我下面描述不工作的窗口大小調整滾動到部分不起作用（描述表明我多麼希望它的工作）：的jQuery - >後如預期

我做窗口調整大小。
窗口大小調整後，當我點擊對應於（）的菜單項，部分抵消了給定菜單項的窗口應該滾動到...
最高45最大寬度：480像素（第一個斷點）
對應於）該菜單項部偏移（頂90像素爲最小寬度481px（第二個斷點）

只有在沒有窗口大小調整（onload）的給定斷點處，它才能正常工作。

function displaymenu() { 


    if ($(window).width() <= 480) { 

       $('.c-main-menu ul').css({display: 'none'});  

      $(document).on("click", "a.c-main-menu__link", function(event){ 
      event.preventDefault(); 
       $('html,body').animate({ 
         scrollTop: $($.attr(this, 'href')).offset().top-56 
        }, 800); 
        $('.c-main-menu ul').slideToggle(); 
      });  
       $('.c-nav .menu-trigger').click(function() { 
       $('.c-nav .c-main-menu ul').slideToggle(); 
       });   

     } else { 

     $('.c-main-menu ul').css({display: 'block'});   
      $(document).on("click", "a.c-main-menu__link", function(event){ 
       event.preventDefault(); 
       $('html,body').animate({ 
        scrollTop: $($.attr(this, 'href')).offset().top-90 
       }, 800);   
      }); 
       } 
       }

來源

2017-08-19 ania_piszko

這是因爲在每次調整大小後，您都會追加一個新事件。爲了防止與舊事件的衝突，您應該殺死舊事件並創建新事件。爲了得到這個方法的最佳辦法是增加一個命名空間爲您的活動，例如：

$(document).on("click.menuLinkEvent",".my_links", function(){});

和添加使用解除綁定方法新事件殺死任何舊的事件，並通過事件與命名空間之前：

$(document).unbind("click.menuLinkEvent");

也看起來像你理解正確的事件將在每次調整大小後添加，所以你添加了setTimeout函數，但忘了添加一個時間，所以它會立即觸發。

我對your fiddler做了一些修改。讓我知道它是否按預期工作

來源

2017-08-19 17:55:13 Frankusky

謝謝你看起來更好。然而，另一個問題出現.menu-trigger'）。click（function（）即與slideToggle - >它是這樣的：1.我開始與onload最小寬度：481px斷點 - >工作正常原始帖子）2.我的窗口調整大小爲最大寬度：480px - >工作正常（如原文所述）3.再次，我做窗口調整大小，但在mmax-widh：480px的範圍內（例如380px ），然後點擊.menu-trigger，並且函數slideToggle觸發2次（openes和close）。可能是因爲「這是因爲每次調整大小後都會附加一個新事件。 –

這是因爲你有兩個事件打開/關閉菜單，殺死事件傳播，以便其他事件不會被執行，檢查第20行https://jsfiddle.net/d1abevro/3/ – Frankusky

的jQuery - >後如預期

回答

相關問題