Question

我想要在我的网站中实现一个相当简单的功能，一旦浏览器窗口宽度大于或等于 x ，它就会包含O(n) <{1}} b 内的。（或任何其他HTML元素，即：<div>）。

我对JavaScript和jQuery有非常基本的了解。但是，我仍然试图创建脚本（很好的部分）。

这是我到目前为止所做的：

<div>

我在使用此脚本时遇到的一个问题是它不会自动检查窗口宽度。相反，只有在页面刷新后才会检查它。

我如何解决这个问题？

编辑：我已更新了我的代码。一切都很好，除了一件小事。

当我在Chrome中打开<span>时，如果宽度超过1919像素，那么它会将var windowWidth = $(window).width(); if(windowWidth > 1919){ $(".navbar").wrap( "<div class='center'></div>" ); // center navbar }括在多个其他DOM Explorer中。

有些事情如下：

div

我决定稍微更新我的jQuery，现在它看起来像这样：

div

如何阻止它多次复制<div class="center"> <div class="center"> <div class="center"> <div class="center">  <div class="navbar">  </div> </div> </div> </div> </div>元素？

干杯。

Answer 1

如果您的代码工作正常并且您遇到的唯一问题是它不会自动调用，那么下面的代码应该可以解决这个问题。在这里，我已将您的代码附加到窗口resize事件，并且还触发了一次，因此在页面加载时，该函数会自动执行一次。之后，只要调整窗口大小，就会调用它。

我还添加了一个else子句，因为如果窗口宽度减少到所选限制以下，我想你会想要展开.navbar。您可以根据自己的要求使用此功能或省略。

$(window).on("resize", function(){
  var windowWidth = $(window).width();

  if(windowWidth > 1919){
    $(".navbar").wrap( "<div class='center'></div>" ); // center navbar
  }
  else{
    $(".navbar").unwrap('.center');
  }
}).trigger("resize");//window resize

Answer 2

window.resize()在这种情况下效率低下。我建议你使用window.matchmedia()来做你的逻辑应该做的事情。当浏览器调整大小时，我不会一直触发，只有在达到特定分辨率时才会执行。阅读以下文档，您就会明白。

MDN ; MatchMedia

示例事件处理程序如下。

var media = window.matchMedia("(min-width: 1919px)");

media.addListener(function(m)}{
    if(m.matches){
      $(".navbar").wrap( "<div class='center'></div>" );
    }else{
      //Remove the wrap
    }
})

Answer 3

$( window ).resize(function() {
  var windowWidth = $(window).width();

if(windowWidth > 1919){
    $(".navbar").wrap( "<div class='center'></div>" ); // center navbar
}
});

你可以用它。

Answer 4

包装div元素的代码应该执行一次。当页面宽度已经大于所需的值时，您不需要包装任何已包装的内容。

var isWrapped = false;
$(window).on("resize", function(){
var windowWidth = $(window).width();

if(windowWidth > 1919 && !isWrapped){
$(".navbar").wrap( "<div class='center'></div>" ); // center navbar
isWrapped = true;
}
else{
//remove wrapping div
isWrapped = false;
}
}).trigger("resize");

如果浏览器窗口宽度大于x，则在新div中包含div

4 个答案: