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，只是隐藏了别人，但似乎像它可能会导致问题？

答

把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>

我无法得到这个工作。我相信你是正确的，@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 媒体查询将在我看来，一个更好的解决方案，但这个应该达到你所追求的。

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

相关推荐