使用jQuery slideToggle時元素跳轉

Question

所以，第一#metext_hiddentext被隱藏，直到你按下#btn_more_metext然后高：50％的股份將由高度覆蓋：汽車 。

jQuery的：

<script type="text/javascript">
    $( document ).ready(function() {
        $('#metext_hiddentext').hide();
        $('#btn_more_metext').click(function(){
            $('#me').css( "height", "auto" );
            $('#metext_hiddentext').slideToggle('slow');
        });
    });
</script>

HTML：

<div id="me">
    <div id="me_content">
     <div id="meimg"></div>
     <div class="metext">
      <h1>I'm Lazor Zombie</h1>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <div id="metext_hiddentext">
      <h2>Lorem ipsum dolor sit amet.</h2>
     </div>
     <div id="btn_more_metext">...</div>
    </div>
</div>

CSS：

#me {
    background: #ff8400;
    height: 50%;
}


#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}

Answer 1

給padding:0和margin:0或添加自定義邊距和填充到<h2>因為它們具有默認邊距並且導致slideToggle()跳轉行為。

h2{
   margin:0;
   padding:0;
}

這是帶有<h2>標簽的演示，其中包含自定義邊距和填充

Answer 2

我認為這里的問題是，當div被動畫化時，它有overflow:hidden; 並且h2有一些余量...所以嘗試刪除邊距形式h2並將其添加到toggeld的div：

這里的小提琴： http ： //jsfiddle.net/qk8nq/

#me {
    background: #ff8400;
    height: 50%;
}
#metext_hiddentext {
    margin:1em 0;
}

#btn_more_metext { 
    font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
    cursor: pointer;
    width: 80px;
    height: 35px;
    line-height: 22px;

}
h2 {
    padding:0;
    margin:0;
}

Answer 3

有時這可以通過添加position: relative來解決position: relative對於容器（在這種情況下是具有“metext”類的那個）。 但我不明白為什么。