使用jQuery slideToggle时元素跳转

时间:2013-12-06 10:17:03

标签: javascript jquery

因此,首先 #metext_hiddentext 会被隐藏,直到您按 #btn_more_metext 然后高度:50%将被高度覆盖:auto

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;

}

3 个答案:

答案 0 :(得分:3)

padding:0margin:0或添加自定义边距和填充添加到<h2>,因为它们具有默认边距,这会导致slideToggle()中出现跳转行为。

h2{
   margin:0;
   padding:0;
}

Here is the demo having <h2> tag with custom margin and padding

答案 1 :(得分: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;
}

答案 2 :(得分:0)

有时可以通过向容器添加position: relative来修复此问题(在本例中为“metext”类)。但我不明白为什么。