Javascript 删除显示：在@media size之间更改时无

我有两个div。当分辨率足够大时，两个div将彼此相邻显示。但当分辨率太小时，它只显示其中一个div，但我可以通过在此分辨率下显示两个按钮在它们之间切换

因此，我的HTML如下所示：

<div id="buttons">
    <p>LEFT</p>
    <p>RIGHT</p>
</div>
<div id="left"> CONTENT </div>
<div id="right"> CONTENT </div>

用于切换的JavaScript只是：

<script>
    $(function() {   
        $('#buttons> p').click(function() {
            var ix = $(this).index();

            $('#left').toggle( ix === 0 );
            $('#right').toggle( ix === 1 );
        });
    });
</script>

基本上一切正常。当分辨率太小时，按钮会弹出，并一次分割为一个div，当分辨率足够大时，按钮会彼此相邻。 但是，如果我更改浏览器窗口的宽度，并在两个div之间切换，然后返回，其中一个div仍有显示：无导致切换时不显示。 我知道有人可能会说，人们不会在手机上改变决定，因此这不应该是一个问题。但不知怎么的，这让我很恼火。所以我想知道是否有什么方法可以告诉它，如果分辨率高于某个特定分辨率，两个div都应该删除display:none或inline样式。

如果大小足够大，可以添加一个resize侦听器来显示这两个元素：

$'按钮>p'。单击功能{ var ix=$this.index； $'left'.toggleix==0； $'right'.toggleix==1； }; $window.resizefunction{ 如果数字$window.width>600$“左，右”。显示； }; 左

对

内容1

---

CONTENT2使用媒体查询根据屏幕大小设置不同的css。PFb样品。您还可以根据屏幕宽度将css显示样式添加为无或块

body {
        background-color: red;
    }
@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

---

运行$window.resize检查，并输入if语句检查窗口宽度。您可以使用window.innerWidth检测窗口宽度。因此，当它大于某个宽度时，您可以检测是否删除元素上的显示属性。或者像@disifor所说的，在窗口上收听调整大小。是否可以考虑滚动条？如果我没有弄错的话，这段代码将查看不包括滚动条的窗口。因此，如果有一个滚动条，它实际上显示div比我的其他媒体查询要晚一点，因为滚动条的宽度是有限的。当然，如果没有滚动条，它会按预期工作。这就是我正在做的。但是我的javascript在隐藏/显示div时使用内联样式。它们覆盖CSS，所以如果它有一个内嵌样式display:none，并且我切换回两者都应该可见的位置，那么其中一个仍然有display:none内嵌样式。