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 Noob ;

＃

好的，我已经在这里使用了其中一个建议并且它的工作非常出色。但只有当手动调整浏览器的大小时...这就是我所拥有的

$(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);
    });

Answer 2

如果你想切换css类，你可以使用jquery toggeClass：

当你加载页面时，你可以触发调整大小事件：

$(window).resize(function() {
    var windowsize = $(window).width();
    $('#demo').toggleClass('collapse', (windowsize > 800));
}).trigger("resize");

查看你的页面后...不是你想要切换的“on”类，如果窗口大小小于800，那么将“in”类添加到折叠元素中？

EDIT3

var displayFirstBlock = function() {
    var windowsize = $(window).width(),
        isDesktop = windowsize > 800;
    $(".collapse:first").toggleClass("in", isDesktop).removeAttr("style");
    $("#button1").toggleClass("large btn-block", !isDesktop).toggleClass("btn-link", isDesktop);
}

$(window).on("resize.showContent", displayFirstBlock);
displayFirstBlock();

绑定调整大小的事件，应立即调用。

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

2 个答案:

EDIT3