3

我在包含 div 的内部有一个 div（即“包装器”div）。这个包装器 div 的边距设置为自动，因此它位于页面的中心。当您单击一个按钮时，包装器 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 中运行良好。

你可以在这里看到它的实际效果： 点击我

4

1 回答 1

0

就像评论中指出的那样，发生这种情况是因为向下滑动这个 div 会将主体的高度增加到大于视口的点，从而导致滚动条出现，从而将整个内容向左移动。

我最好的解决方案是默认使用这个 css 显示滚动条：

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