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です。

#

ここで提案の1つを使用しましたが、見事に機能しました。しかし、ブラウザが手動でサイズ変更されている場合のみ...これは私が持っているものです

$(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クラスを切り替えたい場合は、jquerytoggeClassを使用できます。

ページをロードすると、サイズ変更イベントをトリガーできます。

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

サイズ変更時にイベントをバインドし、すぐに呼び出す必要があります。

于 2012-10-24T09:41:18.230 に答える