javascript - jQuery function running when it shouldn't

Question

I have a function which only needs to run when the width is less then a specific value. I have done this with the if ($(window).width() < n) { } but the function also runs when the width is more then n..

The if if ($(window).width() < n) { } works fine since the background color changes (light gray for < 1000px and dark gray for > 1000px).

Since the function is running also when it shouldn't the layout of my page breaks (click the tabs and then resize to see this). When the function should not run regular tabs should be displayed as you can see, they are displayed correctly until you click they toggle (which is the function getting fired whereas it shouldn't).

Anyone who can help me?

Code

Demo (scroll < and > 1000px to see)

PS: I am aware the would be of a better use for although I have been limited to using a for this.

Answer 1

您不仅if (windowsize < 1000)需要了解当前状态。

if (is_large && windowsize < 1000)
{
    is_large = false;
    // rest of code to handle transition to small size
}
else if (!is_large)
{
    is_large = true;
    // code to handle transition to large size
}

您还需要is_large在初始调用之前处理页面加载设置的情况checkWidth()。