Question

我正在创建一个具有隐藏形式的页面，当单击链接时，该页面应该显示为视图。这是通过将表格绝对放置在容器外部，使容器处于相对位置，然后将表格设置为其顶部位置的视图来实现的。

问题：

当我点击链接时，表单显示在容器内容下方，推送内容并且似乎忽略了“overflow：hidden”属性。

然后，表单会动画制作一种奇怪的效果。它应该对内容进行整齐的动画制作，就好像从div的底部出现一样，不会影响容器内容。

请参阅 this jsFiddle for demonstration 。

HTML

<div class="theContainer">
 <h1>Welcome</h1>

<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores erat.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et um dolor sit amet..</p> <a class="showForm" href="#show-form" title="Show the form">Show the form!</a>

<div class="theForm">
     <h2>The Form</h2>
    <p>Slitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
     <input autofocus="autofocus" max_length="255" type="text" name="email" id="id_email" />
</div>

CSS

.theContainer {
    background: lightblue;
    margin: 30px auto;
    padding: 5px 20px 20px 20px;
    width: 460px;
}
.theForm {
    display: none;
    background: pink;
    padding: 10px;
}

的Javascript

$(document).ready(function () {
    var theContainer = $('.theContainer'),
        theContainerHeight = theContainer.height(),
        theForm = $('.theForm'),
        theLink = $('.showForm');

    theContainer.css({
        'height': theContainerHeight + 'px',
            'overflow': 'hidden',
            'position': 'relative'
    });

    theForm.css({
        'position': 'absolute',
        'top': theContainerHeight + 'px'
    });

    theLink.click(function () {
        theForm.css({
            'display': 'block'
        });
        theForm.animate({
            'top': '0'
        }, 1000);
    });
});

Answer 1

问题是输入字段会在显示时自动获得焦点（至少在Chrome中;在不执行此操作的浏览器中，您不会遇到此问题），导致div向下滚动到元素如果div已滚动到顶部，则会被overflow: hidden隐藏。

手动将theContainer.scrollTop(0);添加到您的点击功能可以避免此问题：

theLink.click(function () {
    theForm.show().animate({'top':0}, 1000);
    theContainer.scrollTop(0);
});

<强> jsFiddle Demo

Answer 2

CSS

.theContainer {
    background: lightblue;
    margin: 30px auto;
    padding: 5px 20px 20px 20px;
    width: 460px;overflow:hidden;
    position: relative;
}
.theForm {
    display: none;
    background: pink;
    padding: 10px;

}

JS

$(document).ready(function () {
    var theContainer = $('.theForm'),
        theContainerHeight = theContainer.height(),
        theForm = $('.theForm'),
        theLink = $('.showForm');

    theContainer.css({
        'height': theContainerHeight + 'px',
            'overflow': 'hidden',
            'position': 'relative'
    });

    theForm.css({
        'position': 'absolute',
            'top': theContainerHeight + 'px'
    });

    theLink.click(function () {
        theForm.css({
            'display': 'block'
        });
        theForm.animate({
            'top': '-0px'
        }, 1000);
    });
});

当使用jQuery从溢出区域外部动画子元素时，元素不遵守隐藏的溢出

2 个答案: