DIV自動重新加載方向更改後

我打開我的主網頁菜單的div使用Javascript：DIV自動重新加載方向更改後

$("#main_menu_list").html(mml_html);

我也用這個Javascript來確定mml_html變量：

var mml_html   = ''; 
var screen_width  = screen.width; 
var screen_height = screen.height; 
if (screen_width < 361) 
{ 
    mml_html += '<ul><li>Item 1</li></ul>'; 
} else 
if (screen_width > 360 && screen_width < 768) 
{ 
    mml_html += '<ul><li>Item 1</li><li>Item 2</li></ul>'; 
} else 
if (screen_width > 767 && screen_width < 1024) 
{ 
    mml_html += '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>'; 
} else 
mml_html += '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Log In</li></ul>';

我是什麼試圖做的是在設備旋轉時再次加載該菜單。在手機上我設計的是360x640，所以當它從360寬度到640寬度時，我想讓菜單顯示2個項目而不是1，而不刷新頁面。

我試過這段代碼：

$(window).on('orientationchange', function() { 
    document.body.style.display='none'; 
    document.body.offsetHeight;    //cause a reflow 
    document.body.style.display='block'; //cause a repaint 
});

但是，這似乎並沒有做任何事情。（也許我做錯了，但肯定的jQuery觸發關上方向）

我也試過這樣：

$("#main_menu_list").load(location.href+" #main_menu_list>*","");

但隨後的菜單列表格只是轉爲空，就好像它試圖加載但無法運行Javascript來重建div數據。

你不能在從Javascript載入的div上使用.load嗎？

，如果我直接把所有的代碼在頁面上，而不是讓它通過JavaScript自動加載的，但我希望有裝載過程中它自動填充的div它可能會奏效。

有沒有更好的方法來做我想做的事情？

我還以爲只是使菜單的div特定的大小，使其只顯示1項或1項和2，只是隱藏了別人，但似乎像它可能會導致問題？

來源

2016-06-09 DerekConlon

把HTML直接在文檔中，然後隱藏或顯示與CSS媒體查詢部分將是一個更好的解決這個問題。

@media (max-width: 1024px) { 
 
    nav__item:nth-child(4) { 
 
    display: none; 
 
    } 
 
} 
 

 
@media (max-width: 768px) { 
 
    nav__item:nth-child(3) { 
 
    display: none; 
 
    } 
 
} 
 

 
@media (max-width: 361px) { 
 
    nav__item:nth-child(2) { 
 
    display: none; 
 
    } 
 
}

<ul class="nav"> 
 
    <li clas="nav__item">Item 1</li> 
 
    <li clas="nav__item">Item 2</li> 
 
    <li clas="nav__item">Item 3</li> 
 
    <li clas="nav__item">Log In</li> 
 
</ul>

來源

2016-06-09 14:55:58

我無法得到這個工作。我相信你是正確的，@media CSS查詢可能我的最好的解決方案，但到目前爲止，我不能讓他們做任何事情。我會繼續嘗試，看看我能否弄清楚。 – DerekConlon

我發現它是「Display：none;」那是行不通的。如果我做其他事情，比如改變背景顏色，那麼效果很好。但它不會隱藏。你不能隱藏列表的一部分嗎？ – DerekConlon

我明白了。我必須添加！重要標誌顯示：無;爲它覆蓋顯示：inline;我的菜單是水平的。 – DerekConlon

以下內容添加到您的自定義JS文件;

var width = screen.width; 
var height = screen.height; 

setInterval(function() { 
    if (screen.width !== width || screen.height !== height) { 
     width = screen.width; 
     height = screen.height; 
     $(window).trigger('resolutionchange'); 
    } 
}, 50);

這將檢測屏幕的高度/寬度，如果它不是預期的，它將重新賦值然後觸發'resolutionchange'事件。

綁定的事件如下：

$(window).bind('resolutionchange', function() { 
    // code goes here 
});

$(window).bind('resolutionchange', applyResolutionChanges()); 

resolutionChanges() { 
    // Code goes here 
}

編輯：通過CSS 媒體查詢將在我看來，一個更好的解決方案，但這個應該達到你所追求的。

來源

2016-06-09 14:57:02 JokerDan

DIV自動重新加載方向更改後

回答

相關問題