Bootstrap:响应式设计 - 当窗口从 980px 调整到 979px 时执行 JS [英] Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

问题描述

我正在使用上一个 Twitter 的 Bootstrap.当我的窗口宽度小于 980px 时，我想执行某个 JS 函数(显示一次工具提示)(如你所知，在这个尺寸上，Bootstrap 修改导航栏并隐藏标准菜单项)——窗口从 768 到 979，简短一点.我知道

I'm using last Twitter's Bootstrap. I would like to execute a certain JS function (showing tooltip once) when my window's width is lower than 980px (as you know, on this size Bootstrap modifies Navbar and hides standard menu items) – window is from 768 to 979, to be short. I know that

@media (min-width: 768px) and (max-width: 979px) {...}

此选项可用于捕获事件.但是，它可能仅用于更改退出样式，例如

this option may be used to catch the event. However, it may be used only for changing exiting styles like

body {background-color:#ccc;}

我需要启动 JS 函数，或者添加或删除元素的特定样式.我试过了:

And I need to launch JS-function, or add or remove a specific style for element. I've tried:

<script>
  window.onresize = function () {
      if (window.outerWidth == 980) {alert('');}
  };
</script>

但是这个解决方案太慢了，甚至挂了一个浏览器窗口.那么，当窗口从 GREATER 侧调整为 979px 并执行 JS 函数时，是否有任何解决方案可以捕获此事件?

but this solution is so slow, and even hangs a browser window. So, is there any solution to catch this event, when window is resized to 979px from GREATER side and execute a JS-function?

谢谢大家！

推荐答案

outerWidth 是一种方法，所以您缺少 ():

outerWidth is a method so you're missing ():

if (window.outerWidth() == 980)

无论如何，如果您使用的是 jQuery:

In any case if you're using jQuery:

$(window).resize(function() {
  if ($(this).width() < 981) {
    //do something
  }
});

这篇关于Bootstrap:响应式设计 - 当窗口从 980px 调整到 979px 时执行 JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！