javascript - JQuery SlideToggle 向下滑动，然后向上滑动以覆盖内容

Question

修复了!我将我的 dt 和 dd 设置为 float: left 所以当切换发生时，标题试图在内容旁边占据它的位置并覆盖它？不确定，但是把浮子拿掉就修好了。现在如果有人能解释为什么......

我不确定如何说明问题，但我有...

 <section id="contact-page">
<div class="contact-wrapper">
    <h1>Contact Us</h1>
    <dl class="contact">
        <dt>Contact</dt>
        <dd>Email: <a href="mailto:myemail@gmail.com">myemail@gmail.com</a></dd>
        <dd>Phone: (812 000 0000)</dd>
    </dl>
    <dl class="address">
        <dt>Address</dt>
        <dd>I forgot to take out my addrss</dd>
        <dd>CHere too...</dd>
        <dd>United States</dd>
    </dl>
    <dl class="business-hours">
        <dt>Business Hours</dt>
        <dd>Monday &mdash; Friday</dd>
        <dd>10am to 6pm</dd>
    </dl>
</div>

非常中肯的Javascript

<script>
$(document).ready(function(e){

   $('#contactclick').on('click',function(){

      $('#contact-page').slideToggle();

   });

})
</script>

发生向下滑动，但一旦它到达底部，它就会向上滑动，因此只显示 h1 标题“联系我们”。可能是边距问题还是什么？ js的新手，所以这让我很烦恼。

相关的 CSS

    .contact-page {
    overflow: hidden;
}

#contact-page {
    clear: both;
    color: #FFF;
    display: none;
    font-family: 'Fenix', serif;
    font-size: 1.8rem;
    letter-spacing: .12rem;
    padding-bottom: 1.5rem;
    padding-top: 6rem;
    text-align: center;
    width: 100%;
}
#contact-page dl {
    float: left;
    margin-top: 2rem;
    text-align: center;
    width: 20%;
}
#contact-page dl dd {
    line-height: 1.7rem;
    margin: 0;
}
#contact-wrapper {
    background: rgba(0 0 0 .1);
    display: ;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

dl {
    float: left;
    margin-top: 2rem;
    text-align: center;
    width: 20%;
}

dd {
    margin: 0 0 0 40px;
}

现在有前后图像! http://imgur.com/2VfXaLw,aryV2VD#0

Answer 1

修复了!我将我的 dt 和 dd 设置为 float: left 所以当切换发生时，标题试图在内容旁边占据它的位置并覆盖它？