0

わかりました、これは私の前の質問に続いており、単純な ajax リクエストを実行することに注意してください。リクエストが readyState 4 とステータス 200 を返すと、レスポンスを div に挿入し、うまくスライドさせます。jQuery や scriptalicious などのツールキットを使用して実行したくありません。

元の質問は次のとおりです。
ツールキットを使用せずにスライド効果を備えた Ajax

これまでのところ、すべてをうまく機能させることができました。ただし、返されたテキストが表示されてから div が展開されるという問題があります。div とテキストを一緒に展開するために必要です。

これが私のコードです

関数slideDown()
{
    document.getElementById('slideDiv').style.visibility = 'hidden';
    xmlhttp.open("GET", "parse.php?what=main", true);
    xmlhttp.onreadystatechange = 関数()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            document.getElementById('butt').value = 'hide';
            document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;
            document.getElementById('slideDiv').style.display = 'ブロック';
            var fHeight = document.getElementById('slideDiv').offsetHeight;
            document.getElementById('slideDiv').style.height = '0';
            document.getElementById('slideDiv').style.visibility = 'hidden';
            関数 timeIt()
            {
                関数 bar()
                {
                    timeSlide(fHeight);
                }
                setTimeout(バー、10);
            }
            timeIt();
        }
    }
    xmlhttp.send(null);
}

関数 timeSlide(fHeight)
{
    var fHeight;
    var diff;
    document.getElementById('slideDiv').style.visibility = 'visible';
    var cHeight = document.getElementById('slideDiv').clientHeight;
    もし (cHeight < fHeight)
    {
        cHeight = cHeight + 3;
        document.getElementById('slideDiv').style.height = cHeight+'px';
        関数 timeIt()
        {
            関数 bar()
            {
                timeSlide(fHeight);
            }   
            setTimeout(バー、10);
        }
        timeIt();
    }
    そうしないと
    {
        endSlide();
    }
}

これは、返された get リクエストを div に入れるために以下を使用したために発生していると思います。

document.getElementById('slideDiv').innerHTML = xmlhttp.responseText;

誰かがこれで私を正しい方向に向けることができますか? 私は JavaScript が特に得意ではなく、おそらくそれについて完全に間違った方向に進んでいると思われるので、どんなポインタでも素晴らしいでしょう! 前もって感謝します！

4

1 に答える 1

1

それが実際に動作しているのを見ずに言うのは難しいですが、これを追加してみてください：

document.getElementById('slideDiv').style.overflow = 'hidden';
于 2009-11-04T11:57:48.783 に答える