如何在網頁上啟用/禁用（實時）javascript插件？

Question

我需要實時啟用/禁用.js插件。 當用戶調整瀏覽器窗口大小時，台式機版本變為移動版。 問題是我需要禁用一些javascript（ fullpage.js ）並添加一些CSS。 從頭到尾重新加載頁面或在PC上使用全屏窗口都沒有問題。 問題是：如何禁用寬度小於800的fullpage.js？ 我已經嘗試過這些東西：

將此函數添加到body onresize事件（不重新加載就不會有結果）：

 function checkWidth() {
        if($(window).width() <= 760 ){
            $('#menu-header-button').click(function(){
                $('#navigation').toggleClass('navbar-v');  
                $('#logo-mobile').toggleClass('visible');
                $('#menu-header-button').addClass('disabled');
                 setTimeout(function(){ 
                    $('#menu-header-button').removeClass('disabled');  
                 }, 500);
            });
        } else if($(window).width() > 760 ){
          $('#fullpage').fullpage({
              menu: '#menu',
              anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
              css3: true,
              afterLoad: function(anchorLink, index){
              if( anchorLink == 'firstPage'){
                   $('#navigation').removeClass('navbar-v'); 
              }
          },
              onLeave: function(index, nextIndex, direction){
              setTimeout(function(){ 
                    $('#navigation').addClass('navbar-v'); 
              }, 500); 
              }
            });
        }

}

這僅在某些時候有效：

$(window).onresize= checkWidth();
function checkWidth() {
                    if($(window).width() == 761 ){
                        location.reload(true);
                    }
                    //...
}

這根本沒有用：

   $(window).onresize= checkWidth();
    function delayCheckWidth(){
      setTimeout(function(){ 
                              checkWidth(); 
                           }, 50); //I thought some delay time can be useful here 
    }
    function checkWidth() {
                        if($(window).width() == 761 ){
                            location.reload(true);
                        }
                        //...
    }

我簽出的相關主題：

1. 節流
2. 如何禁用/啟用插件？
3. 啟用/禁用JavaScript代碼
4. 如何禁用/啟用插件？
5. 動態啟用和禁用jquery旋鈕
6. 禁用和啟用jQuery上下文菜單
7. 還有很多。

沒什么關於實時的，也沒有什么有趣/無助的。

您有什么建議嗎？ 也許我不需要這樣走嗎？

Answer 1

您是否嘗試過fullPage.js的responsive選項？ 不知道這是您想要的還是真的需要完全破壞fullPage.js。

從fullPage.js文檔中 ：

響應：（默認值0）將在定義的寬度（以像素為單位）下使用正常滾動（autoScrolling：false）。 如果用戶希望將fp響應類用於其自己的響應CSS，則將其添加到插件的容器中。 例如，如果設置為900，則每當瀏覽器的寬度小於900時，插件就會像正常站點一樣滾動。

在fullPage.js中正常滾動將保持節的height以及分配給菜單的事件或水平滑塊的控制箭頭，但它將像在任何網站上一樣正常滾動。 您可以在此處查看該模式的演示。

無論如何，如果您確實出於任何原因想要破壞fullPage.js，則需要使用提供的方法。 從文檔：

$ .fn.fullpage.destroy（類型）

銷毀插件事件，並銷毀其HTML標記和樣式。 使用AJAX加載內容時的理想選擇。 （）

類型：可以為'empty'或'all' 。 如果全部通過，則將刪除fullpage.js使用的HTML標記和樣式。 這樣，將保留原始HTML標記（在進行任何插件修改之前使用的標記）。

//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();

//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');