Question

我是jQuery的新手并尝试在浏览器调整大小上添加一些项目，这些项目最初会改变他们在DOM中的位置，例如将它们向上或向下移动元素以满足响应式设计要求。当我缩小浏览器时，元素会附加或者说会改变自己的位置，例如＆lt; 767px，但我面临的问题是将元素恢复到原始位置和样式在浏览器升迁，如＆gt; 768px或者说要撤消我已经完成的追加＆lt; 767px。我正在使用以下代码。提前谢谢。

$(document).ready(function(){
 jQuery(window).resize(function(){
 var wwindow = jQuery(window).width();
  if (wwindow < 767) {
          $( ".contact" ).after( $( ".social" ) );
          $( ".strip-right" ).prepend( $( ".ingrese" ) );
          $( ".strip-right" ).prepend( $( ".news" ) );
          $( ".contact-info .box .col3" ).after( $( ".contact-info .box .col1" ) );  
          $( ".property-list .common h4 span" ).prepend( "/&nbsp;" ); 
          $( ".clients" ).after( $( ".content-box .col2" ) );
          $( ".banner" ).before( $( ".caption2" ) ); 
          $( ".banner" ).before( $( ".caption2" ) );
          $( ".caption2 .row" ).before( $( ".caption2 .txtb h3 strong" ) );
          $( ".caption2 > strong" ).append( $( ".ref" ) );
          $( ".caption2 > strong > span" ).prepend( "|&nbsp;" );
  }
  if (wwindow > 768) {
          $( ".social" ).remove();
          $( ".ingrese" ).remove();
          $( ".news" ).remove();
          $( ".contact-info .box .col1" ).remove();
          $( "/&nbsp;" ).remove();
          $( ".content-box .col2" ).remove();
          $( ".caption2" ).remove();
  }
 });
});

Answer 1

@media screen and (max-width: 768px) {
    .social,.ingrese,.news,.contact-info .box .col1,.content-box .col2,.caption2{
        display: none;
    }
}

@ media标签由bootstrap使用，就像它的响应式设计而闻名。您可以像上面一样添加它们来隐藏元素，当浏览器达到最大宽度768时，它会将css添加到@media标签中

Answer 2

我使用下面的代码刷新超出＆gt; 768px的页面，这似乎有效，但在调整大小后刷新页面需要1或2秒。

$(window).resize( function() {
window.location.href = window.location.href;
});

删除浏览器上的附加项目使用jQuery调整大小

2 个答案: