3

我有以下代码有效，但在每个切换操作结束时它变得有点跳跃。

如果我切换段落会更流畅吗？

我正在尝试获取该段落，但我不知道该怎么做。

任何人都可以帮助我吗？

提前致谢。

<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>

4

4 回答 4

5

为了向下滑动工作，JQuery 必须猜测元素的最终高度。当它出错时，当动画结束并且允许元素找到其自然高度时，您会看到一个跳跃。

您的问题是由p标签上的边距引起的，这些边距在 JQuery 的原始估计中占用空间，但在动画完成时被折叠。

解决方案是删除p标签上的边距，通过为 .morepara div 提供明确的高度、边框或一些顶部/底部填充来尝试防止折叠发生，尽管这两个选项都有不良的副作用。

于 2009-06-13T20:48:41.427 回答
0

您可以使用.children('p')以便从 <div> 访问 <p>，但我建议您尝试该.slideToggle('slow')方法而不是.toggle，仍然将其应用于 <div> 元素。一般来说，它非常适合您期望的那种东西。

于 2009-06-13T13:13:41.270 回答
0

我不确定是什么导致了抖动。我的猜测是当 div 的显示属性从“none”更改为“block”时，将段落放入 div 中会产生效果。我已经应用了 stanch 的建议，并提出了一个似乎效果更好的工作示例。

<html>
<head>
<style type="text/css">
body {width: 660px; margin: 0 auto; }
.toppara{
background-color: #FF9; 
}
.morepara {
background-color: #fff; 
}

.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>

    <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>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$('document').ready( function (){
    $('.morepara p').hide();
    $('.togglebutn a').click(
        function(){
            var parentpara = $(this).parent().prev().children();
            parentpara.toggle('normal');
        }
    );
});
</script>
</body>
</html>
于 2009-06-13T15:40:35.817 回答
0

不确定您是否对此有答案，但给正在切换的 DIV 一个特定的宽度实际上对我有用。签入 FF 和 IE 7-8

于 2009-11-12T04:06:11.953 回答