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

何がジッターを引き起こしているのかわかりません。私の推測では、これは、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に特定のWIDTHを与えることは実際に私のために働きました。FF＆IE7-8でチェックイン

于 2009-11-12T04:06:11.953 に答える
0

.children('p')<div> から <p> にアクセスするために を使用できますが、 の.slideToggle('slow')代わりにこのメソッドを試して.toggle、引き続き <div> 要素に適用することをお勧めします。一般的に、それはあなたが期待するようなものによく合います.

于 2009-06-13T13:13:41.270 に答える