Question

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

有问题的div是附在页脚上的div。内容是＆＃34;关于PENDLEY MANOR＆＃34;。如果还有一种方法可以将div减少回到展开之前的状态会有所帮助。

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一个相对位置的包装容器。

然后，将#expand置于绝对值，并使用负Top属性和适当的值。

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

干杯。

可扩展的向上div创建下面的空白空间

1 个答案: