jquery - 可向上扩展的 div 在下方创建空白空间

Question

我添加了一些 jQuery 来垂直扩展我的 div，但是它在自身下方创建了一个与可扩展容器高度相同类型的空间。需要将其删除。

有问题的 div 是附在页脚上的那个。内容是“关于彭德利庄园”。如果还有一种方法可以将 div 减小到展开前的状态，那将很有帮助。

实时网址:http://bit.ly/1fIuBqa

HTML

<div class="index-about-expandable" id="index-about-expand-container">
            <h2>ABOUT PENDLEY MANOR</h2> <a><i class="fa fa-plus index-expand-plus" id="expand"></i></a>
            <div class="clearboth"></div>
            <p>this is a test</p>
        </div>

JQUERY

<script type="text/javascript">
            $(function() {
                $("#expand").click(function() {
                    $("#index-about-expand-container").animate({'height': '270px', 'top': "-220px"});
                });
            });
        </script>

CSS

#index .index-about-expandable { background-color: #433131; padding: 1px 10px; color: #fff; width: 240px; margin-top: 27px; position: relative; z-index: 5; overflow: hidden; height: 45px; }
#index .index-about-expandable i { font-size: 14px; float: left; margin-top: 15px; }
#index .index-about-expandable h2 { float: left; margin-right: 20px; }

Answer 1

这是相对定位造成的。它经常让我头疼，我通常会尽量避免它。

我建议将 div#expand 移到页脚中。如果页脚没有相对定位，那么给#expand一个相对位置的包装容器。

然后，使用负 Top 属性和适当的值将 #expand 定位为绝对值。

对于您的 javascript，您需要在修改高度时额外修改 top 属性。

干杯。