javascript - 删除显示 : none when changing between @media sizes

Question

我有两个 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 仍然有 display: none 导致它在切换时不显示.我知道有人可能会争辩说人们不会更改手机的分辨率，因此这应该不是问题。但不知何故，这让我很烦。所以我想知道是否有某种方法可以告诉它，如果高于某个分辨率，两个 div 都应该删除 display: none 或内联样式。

Answer 1

如果尺寸足够大，您可以添加一个 resize 监听器来显示这两个元素:

$('#buttons> p').click(function() {
  var ix = $(this).index();
  $('#left').toggle(ix === 0);
  $('#right').toggle(ix === 1);
});
$(window).resize(function() {
  if (Number($(window).width()) > 600) $('#left, #right').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <p>LEFT</p>
  <p>RIGHT</p>
</div>
<div id="left"> CONTENT1 </div>
<div id="right"> CONTENT2 </div>