Question

我设法分离了我的侧边栏上的特定内容，并使用jQuery插入导航栏之前，所以代码如下所示：

$(document).ready(function(){
  if($(window).width() < 1000 ){
    $(".red").detach().insertBefore(".blue");
  }
});

.red{
  background: red;
}
.green{
  background: green;
}
.blue{
  background: blue;
}

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="main_container">
<p>This is the paragraph</p>
  <a href="#">This is a link text</a>

</div>
<div class="red">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1>
</div>
<div class="green">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1>
</div>
<div class="blue">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, dicta modi ratione sit cupiditate qui tempore soluta, optio consequatur in vero. Qui deleniti voluptates quod, distinctio aperiam provident tempore facere.</h1>
</div>

但后来我注意到，如果我回到大屏幕，内容不会回到边栏。

我如何分离侧边栏内容并将其放在任何我想要的小于600px的设备上，如果屏幕宽度大于600px，请将其放回侧栏？

希望你能提供帮助。

Answer 1

$(window).resize(function(){
    if ($(window).width() < 600){   
        $("#mobile_sidebar").detach().insertBefore(".home_page_banner");
    }   
});

如何在if语句中触发resize

1 个答案: