Javascript 在调整大小时替换HTML

我正在努力使我的侧边栏具有响应性。问题是，我不能简单地使用CSS媒体查询，因为我的两个侧边栏设计非常不同，无法完成（许多文本需要删除，等等）。所以我有两个侧边栏设计，当浏览器调整大小时，其中一个应该取代另一个

以下是我到目前为止得到的信息：

$(window).on('resize', function() {
    var width = $(this).width();
    var height = $(this).height();

    var tablet = 1240;

    /* If width of browser is less than 1240... */
    if (width < tablet) {

        /* Hide the non-tablet sidebar. */
        $('.sidebar:not(.tablet)').hide();

        /* If the tablet sidebar already exists on the page, show it. */
        if ($('.sidebar.tablet').length) {
            $('.sidebar.tablet').show();
        } else {

            /* If the tablet sidebar doesn't exist on the page, load it and append it to the body. */
            $.get("sidebar_tablet.php", function(data) {
                $('body').append(data);
            });
        }
    }

    /* If width of browser is greater than 1240... */
    if (width > tablet) {

        /* Hide the tablet sidebar. */
        $('.sidebar.tablet').hide();

        /* Show the non-tablet sidebar. */
        $('.sidebar:not(.tablet)').show();
    }
});

$（窗口）.on（'resize'，function（））{
var width=$（this.width（）；
var height=$（this.height（）；
var=1240；
/*如果浏览器的宽度小于1240*/
if（宽度<平板）{
/*隐藏非平板电脑侧边栏*/
$（'.sidebar:not（.tablet'）.hide（）；
/*如果页面上已存在tablet侧边栏，请显示它*/
if（$（'.sidebar.tablet'）.length）{
$（'.sidebar.tablet'）.show（）；
}否则{
/*如果页面上不存在tablet侧边栏，请加载它并将其附加到正文中*/
$.get（“sidebar_tablet.php”，函数（数据）{
$（'body'）。追加（数据）；
});
}
}
/*如果浏览器的宽度大于1240*/
如果（宽度>平板电脑）{
/*隐藏平板电脑侧边栏*/
$（'.sidebar.tablet'）.hide（）；
/*显示非平板电脑侧边栏*/
$（'.sidebar:not（.tablet'）.show（）；
}
});

问题是，如果我将浏览器的大小调整到小于1240px的宽度，它会多次加载平板电脑侧栏（我猜是因为检查侧栏是否已经存在的速度比我调整浏览器大小的速度慢），即使我要检查页面上是否已经存在侧栏

---

如何修复此问题？

可能加载侧边栏_table.php需要一些时间，并且您正在请求完成之前调整浏览器的大小。

---

您可以添加一个var来标记是否已完成侧栏_table.php的加载。

因此，请展开我上面的评论

您可以通过

@media

实现这一点。在HTML中有两个侧栏，并使用

display:none

和

display:block

组合来隐藏和显示。在HTML中同时使用大小侧栏对性能的影响基本上是不存在的，尤其是与javascript解决方案相比

。调整大小以查看div的更改

HTML

---

你可以把两个侧边栏都放在HTML中，用CSS

@media

查询和

显示隐藏一个侧边栏：none

，然后当它变小时，就反其道而行之。为什么不使用media查询而不是javascript呢我给窗户定尺寸。您可以

display:none

和

display:block

根据屏幕大小进行显示和隐藏。决定使用@misterManSam的解决方案。不过，我必须运行一些测试，看看他的解决方案是否更有效。

<div class="big">
    I'm Big!
</div>

<div class="small">
    I'm Small
</div>

html,body {
    height: 100%;
}
.big {
    background: #F00;
    height: 100%;
    display: none;
}
.small {
    background: #FF0;
    height: 100%;
}

@media all and (min-width: 500px) {
  .big {
    display: block;
  }
    .small {
        display: none;
    }
}