jquery - 当窗口达到一定宽度时用jquery删除css类

Question

我正在尝试向我拥有的某些元素添加和删除一些类。我正在使用 bootstrap，我目前拥有网站 www.iampaulb.com，它在我的 iPhone 等移动设备上看起来相当不错(对于第一次尝试)，但在台式机上看起来不太好。

这是有问题的 div:

<div id="demo1" class="collapse in">
    <legend class="main-legend">Hello! I am Paul...</legend>

类中的 .collapse 会在加载时关闭 div(因此您需要按下按钮才能打开)我想删除该类并使用类 .collapse ，这将使内容在加载时保持打开状态。我已经浏览过这里并尝试了各种方法。比如

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 800) {
    //if window width is greater than 800px make tab visable
      $('#demo').addClass('collapse');
  }
})

但是好像不行。 :(

有什么建议吗？仅供引用，我是一个 jQuery 菜鸟 ;

#

好的，我已经使用了此处的其中一项建议，并且效果非常好。 但只有当浏览器被手动调整大小时......这就是我所拥有的

$(window).on("resize.showContent", function() {
    windowsize = $(window).width();
    if(windowsize > 800) {
        $(".collapse:first").addClass("in").removeAttr("style");
    }
}).trigger("resize.showContent")

$(window).on("resize.showContent", function() {
    windowsize = $(window).width();
    if(windowsize < 800) {
        $(".collapse:first").removeClass("in").removeAttr("style");
    }
}).trigger("resize.showContent") 

// change of button for top element

$(window).on("resize.showContent", function() {
    windowsize = $(window).width();
    if(windowsize > 800) {
        $("#button1").removeClass("large btn-block").addClass("btn-link").removeAttr("style");
    }
}).trigger("resize.showContent")

$(window).on("resize.showContent", function() {
    windowsize = $(window).width();
    if(windowsize < 800) {
        $("#button1").removeClass("btn-link").addClass("-large btn-block").removeAttr("style");
    }
}).trigger("resize.showContent")

这使该部分能够展开并删除按钮类，因此它显示一个 s 链接。 但是，当在 iphone 或台式机上说时，我会修改什么让它默认。是否只是删除 resize. 的情况？希望这是有道理的

Answer 1

试试这个解决方案

    var resizing = false;

    function doResize() {
        var w=$(window).innerWidth();
        //(UPDATE)do add remove of CSS-classes, according to w / needs
        if (w > 800) {
            $('#demo1').addClass('collapse'); //you have demo1 as id in the code
        } else {
            $('#demo1').removeClass('collapse');
        }
    }

    $(window).resize(function(e) {
        //use timeouts not to trigger event constantly
        if (resizing!==false) {
            clearTimeout(resizing);
        } 
        resizing=setTimeout(doResize, 200);
    });