DIV 方向改变后自动重新加载

Question

我用 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>';

我想做的是在设备旋转时再次加载该菜单。在 phone 上，我正在设计它的 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>*","");

但是随后菜单列表 div 变成空的，好像它试图加载但无法运行 Javascript 重建 div 数据。

您不能在从 Javascript 加载的 div 上使用 .load 吗？

如果我将所有代码直接放在页面上而不是通过 Javascript 自动加载它可能会起作用，但我希望它在加载过程中自动填充 divs .

有没有更好的方法来完成我想做的事情？

我还想过将菜单 div 设置为特定大小，以便它只显示第 1 项或第 1 项和第 2 项并隐藏其他项，但这似乎会导致问题？

Answer 1

直接将 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>

Answer 2

将以下内容添加到您的自定义 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);

这将检测屏幕 height/width，如果不是预期的，它将重新分配值并触发 'resolutionchange' 事件。

绑定事件如下：

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

或

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

resolutionChanges () {
    // Code goes here
}

编辑：在我看来，通过 CSS 进行媒体查询是更好的解决方案，但这应该实现您的目标。

DIV 方向改变后自动重新加载

DIV Auto Re-Loading After Orientation Change

jquery

responsive