Question

我有两个部分：

<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
 <!--stuff --->
</section>

<section class="focus" id="need" style="display:none;">
 <!--stuff --->
</section>

当窗口降低到小于1043px的宽度时，我想显示第二部分。并按display:none

隐藏第一部分

更新：当宽度小于1043时，如何删除第一部分的id属性？

Answer 1

您应该使用CSS媒体查询。您可以在此处详细了解：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

例如：

@media only screen and (max-width: 1043px) {
    section.focus {
      display: block;
    }
}

Answer 2

首先，您不能为多个div使用相同的ID。所以改变一个div的id。并隐藏第二个div并显示第一个div：

使用CSS：

@media only screen and (max-width: 1043px) {
  .focus {
    display: block;
  }
  .notes {
    display: none;
  }
 }

Answer 3

为了响应您删除ID属性的要求，请尝试以下JavaScript。但它只能执行一次，如果您对性能感兴趣，则应考虑调整resize处理程序的debounce / throttle。（http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/）

$(window).on('resize', function() {
    if($(window).width() < 1043) {
        $('.notes').removeAttr('id');
        $(window).off('resize');
    }
});

但是，媒体查询答案是基于屏幕宽度显示/隐藏的正确方法。

更改显示属性和id属性

3 个答案: