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>

Answer 2

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

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

在@media大小之间切换时删除display：none

2 个答案: