窗口從手機切換到桌面時添加調整大小事件

我只是想知道如果任何人可以填補我如何resize事件添加以下代碼：

/* Your code goes here */ 

var $ = jQuery, 
breakpoint = 940, 
initClass = 'toggleSubnavInitiated', 
menu, 
parentLinks, 
childrenItems; 

$(document).ready(function() { 
menu = $('.menu'); 
parentLinks = menu.find('.menu-item-has-children > a'); 
childrenItems = menu.find('.sub-menu'); 

if ($(window).width() <= breakpoint) { 
    toggleSubnav(menu, parentLinks, childrenItems); 
} 
}); 

$(window).resize(function() { 

if ($(window).width() <= breakpoint) { 
    toggleSubnav(menu, parentLinks, childrenItems); 
} 
}); 

function toggleSubnav(menu, parentLinks, childrenItems) { 

if (parentLinks.length !== 0) { 
    menu.addClass(initClass); 
    childrenItems.hide(); 

    parentLinks.on('click', function(event) { 
     event.preventDefault(); 

     $(this).siblings('.sub-menu').toggle(); 
    }); 
} 
}

它看起來像有一個在這個代碼塊，但它在瀏覽器從移動網站轉移到桌面版網站時似乎沒有調整大小。在Chrome上，我能夠獲得941 px作爲交換機從移動到桌面的斷點。 940像素，我猜是包含在這個腳本中，是從桌面移動到手機？桌面到手機似乎功能正常。任何人有任何想法如何添加一個調整大小事件，當窗口從移動到941像素的桌面？

謝謝大家的幫助！

P.S.我剛加入這裏，所以請放輕鬆點！ ;）

來源

2016-02-02 andrewf12

你有一個合法的resize（）事件分配給窗口。這段代碼中的問題是什麼？當你從桌面切換到移動時，你是如何做到的？使用Chrome網頁開發人員工具？ –

我真的不明白你的問題是什麼......你的resize事件和回調看起來像他們正確定義。當您使用Chrome時，您的代碼是否正常工作？ –

對不起，我剛更新了評論。我意識到這很混亂。我注意到的問題是，當窗口從移動站點移動到桌面站點時，它不會自動刷新頁面。從移動網站到桌面網站的斷點是941px。對於940像素的resize事件似乎有必要從桌面移動到移動。我想我只是錯過了另一個調整大小事件，從移動到桌面（即941像素）？ – andrewf12

您的resize()事件在從高於940px的值變爲低的值時正確設置。但是，您還沒有定義任何反其道而行的行爲。您可以修改您的代碼是這樣的：

/* your previous code */ 
$(window).resize(function() { 

    if ($(window).width() <= breakpoint) { 
     toggleSubnav(menu, parentLinks, childrenItems); 
    } else { 
     $(this).siblings('.sub-menu').toggle(); //I assume you want the menu to disappear when moving back to a wider screen 
    } 
});

我也會使用toggle()方法，因爲每次它被調用時，它要麼顯示或隱藏菜單要小心。所以想象用戶第一次調整大小在940像素以下時，菜單將按照您的計劃顯示。如果他調整更低，您的菜單將再次消失。

來源

2016-02-02 21:55:11

感謝您的超級快速回復。對此，我真的非常感激。當我將其添加到腳本並對其進行測試時，在移動網站上，子菜單會從其父菜單中自動展開。上面的代碼是幫助將所有子菜單項自動摺疊爲其父項。 – andrewf12

你可以嘗試'切換（顯示）'，''顯示'是一個布爾值。將其設置爲「true」顯示菜單，「false」將其隱藏。 –

因此，像：「$（窗口）.resize（函數（）{ 如果（$（窗口）.WIDTH（）<=斷點）{ toggleSubnav（菜單，parentLinks，childrenItems）; }其他{ } };（我想你想讓菜單消失時，回到更寬的屏幕 } }）; ' 我試過了，但沒有運氣:( – andrewf12

窗口從手機切換到桌面時添加調整大小事件

回答

相關問題