Question

我在包含div的内部有一个div（即“包装”div）。此包装器div的边距设置为auto，因此它以页面为中心。单击按钮时，使用jQuery的slideDown函数显示包装器div内的另一个div。但是，当发生这种情况时，包装器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('&nbsp;-&nbsp;');
        $(this).css('padding','0px 2px 0px 2px');

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

        }

    );

“problemBullet”是我从span元素创建的一个小按钮，你单击以显示和隐藏div

这适用于Google Chrome和Safari。

你可以在这里看到它： Click me

Answer 1

在评论中指出这是因为向下滑动这个div会将身体的高度增加到比视口大的点，导致滚动条出现，从而将整个内容移到左边。

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

body {
    overflow-y: scroll;
}

jQuery slideDown导致包装器div在firefox中移位

1 个答案: