Question

我用Javascript加载主页面菜单：

$("#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>*","");

但是菜单列表div只是空了，好像它试图加载但无法运行Javascript来重建div数据。

您是否可以在从Javascript加载的div上使用.load？

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

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

我还想过让菜单div达到一个特定的大小，这样它只显示第1项或第1项和第2项，只是隐藏了其他内容，但这似乎可能会导致问题？

Answer 1

直接将HTML放入文档中，然后使用CSS Media Queries隐藏或显示部件将是解决此问题的更好方法。

@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);

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

将事件绑定如下：

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

OR

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

resolutionChanges () {
    // Code goes here
}

编辑：在我看来，通过CSS进行媒体查询会是一个更好的解决方案，但应该实现你所追求的目标。

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

2 个答案: