0

ボタンをクリックして高さを拡大できるボックスを作りたいです。ボックスには、デフォルトで 3 行のテキストのみが表示されます。(たとえば、高さが 50px でオーバーフローが非表示であるとします)

「もっと見る」ボタンをクリックすると、ボックスのテキストがアニメーション化されてスライドダウンします。もう一度クリックして上にスライドします。

また、「自動」の高さまでスライドさせたいです!! (スライドダウンはコンテンツの高さに依存します) jquery のサンプルをたくさん試しましたが、うまくいきませんでした。誰か助けてください。

これが私のコードです...

<div class="cmCnt">
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
</div>


<a href="#" class="btnMore">more</a>


.cmCnt { height:50px;  overflow:hidden; }
4

1 に答える 1

0

ああ、これは私が数年前に遭遇した問題です...私の解決策は、特別なスタイル (つまりauto、高さ、visibleオーバーフロー) を使用せずに開始し、JavaScript を使用して要素の高さ全体を格納することでした。次に、高さを 50px に変更し、ページの読み込み後にオーバーフローを非表示にします (遷移なし)。これで、完全な高さがわかったので、自由にアニメーション化できます。

このようなもの：

$(document).ready(function() {
    $('.cmCnt').each(function() {
        var $this = $(this);
        $this.data('originalHeight', $(this).height();
        $this.css({'height': '50px', 'overflow': 'hidden'});
        $this.click(function() {
            var newHeight = $this.data('originalHeight');
            // animate $this to newHeight however you like here
        });
    ));
));
于 2013-10-15T05:58:50.460 に答える