0

我正在尝试向我拥有的某些元素添加和删除一些类。我正在使用引导程序，我目前有网站 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")

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

4

2 回答 2

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);
    });
于 2012-10-24T09:18:45.987 回答
0

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

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

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

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

编辑3

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

在调整大小时绑定一个事件，应该立即调用。

于 2012-10-24T09:41:18.230 回答