我有以下代码可以工作，但在每个切换操作结束时它变得有点跳动。
如果我切换段落会更流畅吗？我正在尝试获取该段落，但我不知道该怎么做。
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9;
}
.morepara {
background-color: #fff;
display:none;
}
.togglebutn {
color: #900;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="section1">
<div class="toppara"><p>Content 1.</p>
</div>
<div class="morepara">
<p>
Content 2.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 1 -->
<!-- section 2 -->
<div id="section2">
<div class="toppara"><p>Content 3.</p>
</div>
<div class="morepara">
<p>
Content 4.
</p>
</div>
<p class="togglebutn">
<a>Show/Hide</a>
</p>
</div><!-- section 2 -->
<script language="javascript" type="text/javascript">
$(function() {
$('.togglebutn a').click(
function(){
var $parentpara = $(this).parent().prev();
$parentpara.toggle('slow');
});
});
</script>
为了向下滑动工作，JQuery 必须猜测元素的最终高度。当出现此错误时，您会在动画结束时看到跳跃，并且允许元素找到其自然高度。
您的问题是由边距引起的p标签占用了 JQuery 原始估计的空间，但在动画完成时会折叠起来。
解决方案是删除p标签，通过给 .morepara div 一个明确的高度、边框或一些顶部/底部填充来尝试防止折叠发生，尽管这两个选项都有不良的副作用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
