3

包含 div (つまり、「ラッパー」div) 内に div があります。このラッパー div のマージンは auto に設定されているため、ページの中央に配置されます。ボタンをクリックすると、ラッパー div 内の別の div が jQuery の slideDown 関数を使用して表示されます。ただし、これが発生すると、ラッパーの div が数ピクセル左にシフトし、ボタンをもう一度クリックして jQuery のスライドアップ機能を介して div を非表示にすると、元に戻ります。これが私のコードです。div.answer は、ボタンをクリックして表示/非表示にするラッパー div 内の div です。

CSS:

    #wrapper {
        background: url(myimages/bground.jpg);
        text-align: center;
        margin: auto;
        width:1020px;
        border:0px solid red;
    }

    div.answer{
        border: 0px solid #5c5c5c;
        padding:3px;
        margin-left: 29px;
        margin-right: 29px;
        display:none;
    }

Javascript:

    $('span.problemBullet').toggle(function(){
        $('div.answer').slideDown();
        $(this).html(' - ');
        $(this).css('padding','0px 2px 0px 2px');

    },
        function(){
            $('div.answer').slideUp();
            $(this).html(' + ');
            $(this).css('padding', '0px 0px 0px 0px');

        }

    );

「problemBullet」は、要素から作成した小さなボタンで、spanクリックしてdivを表示および非表示にします

これは、Google Chrome と Safari で正常に動作します。

ここで実際の動作を確認できます: Click me

4

1 に答える 1

0

コメントで指摘されているように、これは、この div を下にスライドするとボディの高さがビューポートよりも大きくなり、スクロールバーが表示され、コンテンツ全体が左に移動するために発生します。

私の最善の解決策は、この css を使用してデフォルトでスクロールバーを表示することです。

body {
    overflow-y: scroll;
}
于 2013-01-08T14:45:11.363 に答える