Javascript onResize觸發器螺絲動畫

Question

我在調用onResize之後遇到下拉問題。在全新載入頁面時，下拉導航會正常運行，但是如果您調整瀏覽器大小並單擊子導航的下拉列表，它將快速移動並且不會保持打開狀態。

這是Live Demo。

這裏僅僅是JS：

var res; 
onResize = function() { 
var responsive_viewport = $(window).width(); 
var mobile_menu = $('nav div span'); 
var mobile_list = $('nav div #main-nav'); 

if (res){ clearTimeout(res)}; 
res = setTimeout(function(){ 
    console.log("resize triggered"); 

    if (responsive_viewport <= 1024) { 

     mobile_menu.add(mobile_list).click(function(event) { 
      mobile_list.slideToggle('fast', 'swing', function() { 
       mobile_list.toggleClass('active'); 
      }); 
      event.stopPropagation(); 
     }); 

     $(document).click(function() { 
      if (mobile_list.hasClass('active')) { 
       mobile_list.slideToggle('fast', 'swing', function() { 
        mobile_list.removeClass('active'); 
       }); 
      } 
     }); 
    } 
    if (responsive_viewport <= 768) { 
     console.log('on mobile'); 
     nextvid.addClass('mobile'); 
    } else { 
     nextvid.removeClass('mobile'); 
    } 

},200); 
} 
$(document).ready(onResize); 
$(window).bind('resize', onResize); 

謝謝！

Answer 1

發生了什麼是每你調整窗口的大小（我猜計數pageload）你綁定到點擊該項目的事件。所以當你調整一次窗口大小時，事件觸發兩次，下拉菜單打開然後關閉。如果您再次調整窗口大小，現在可以打開，關閉然後再次打開。所以長話短說，你應該只綁定一次！如果您然後想要更改綁定（就像他們切換到移動視圖一樣），您應該然後unbind重新綁定一個不同的方式。

祝你好運！