0

設定された最大高さとそのテキストの高さの間で div を折りたたむ簡単な方法 (純粋な JavaScript) はありますか?

詳細には、事前に設定された高さ (たとえば 40 ピクセル) の div を読み込み、「さらに表示」ボタンを表示したいので、クリックすると div がその中のテキストの高さに設定されます (たとえば 80px) ）。もう一度クリックすると、div の高さが初期の高さ (40 ピクセル) に設定されます。

視覚的な例は次のようになります。

初期状態 (40 ピクセル)

divのテキストはこの
ようなもの
になるので、ボタン
が詳細情報を表示すると...

「詳細情報を表示」をクリックすると、この状態 (80 ピクセル) になります。

div のテキストはこの
ようなもの
になるので、ボタン
を押すと..
残りのテキストが表示されます
;)
少ない情報を表示します...

「show less info」をクリックすると、前の状態 (40 ピクセル) に戻ります。

height / max-heightとclientHeightを試してみましたが、高さのプロパティ値を設定するとclientHeightをオーバーライドします。

前もって感謝します。解決策が複雑すぎる場合は、ためらわずに答えてください。

4

3 に答える 3

1

このチュートリアルをご覧になることをお勧めします：http：//papermashup.com/simple-jquery-showhide-div/

于 2012-09-03T16:15:41.340 に答える
1

過度に複雑な可能性のある解決策の 1 つ:

$('p').each(

function() {
    var that = $(this);
    that.attr('data-fullheight', that.height());
    that.height(that.height() / 2);
    that.closest('div').append('<a src="#" class="readmore">Read more</a>');
});

$('div').on('click', 'a.readmore', function(e) {
    var p = $(this)
        .closest('div')
        .find('p[data-fullheight]'),
        full = p.attr('data-fullheight');
    p.animate({
        'height' : full == p.height() ? full/2 : full
        },200)
});​

これは、次の HTML を前提としています (必須でdiv idはありませんが)。

<div id="text">
    <p>...text...</p>
</div>

<a href="http://jsfiddle.net/davidThomas/TEGF7/" rel="nofollow">JS Fiddle のデモ。

最後のものが十分に複雑ではないと思ったという理由だけで、この (プレーンな JavaScript!) ソリューションも投稿すると思いました。

var readmores = [];

function heights(el) {
    if (!el) {
        return false;
    }
    else {
        var h = parseInt(window.getComputedStyle(el, null).height, 10),
            moreLess = document.createElement('a'),
            text = document.createTextNode('Read more'),
            parent = el.parentNode;

        readmores.push(moreLess);

        moreLess.src = '#';
        moreLess.className = 'readmore';
        moreLess.appendChild(text);

        parent.insertBefore(moreLess, el.nextSibling);

        el.setAttribute('data-fullheight', h);
        el.style.height = Math.floor(h / 2) + 'px';
    }
}

function toggleHeight(el) {
    if (!el) {
        return false;
    }
    else {
        var full = el.getAttribute('data-fullheight'),
            curHeight = parseInt(el.style.height, 10);

        el.style.height = full == curHeight ? Math.floor(full / 2) + 'px' : full + 'px';
    }
}

function toggleText(el) {
    if (!el) {
        return false;
    }
    else {
        var text = el.firstChild.nodeValue;
        el.firstChild.nodeValue = text == 'Read more' ? 'Read less' : 'Read more';
    }
}

var paras = document.getElementsByTagName('p');

for (var i = 0, len = paras.length; i < len; i++) {
    var cur = paras[i];
    heights(cur);
}

for (var i=0, len=readmores.length; i<len; i++){
    readmores[i].onclick = function(){
        toggleHeight(this.previousElementSibling);
        toggleText(this);
    }
}

<a href="http://jsfiddle.net/davidThomas/TEGF7/1/" rel="nofollow">JS Fiddle のデモ。

これは（Chrome 21で）機能しますが、IEを修正する必要があるため、まったく考慮されません。

于 2012-09-03T16:19:15.547 に答える
1

これを解決する簡単な解決策は、max-height プロパティを使用することです。

以下を設定できます。

div.style.maxHeight = 40; //initial state

ボタンが押された場合:

div.style.maxHeight = 80; //final state (set a value bigger than the text is going to be)

もう一度押すと:

div.style.maxHeight = 40; //initial state again

このソリューションの問題点は、実際のテキスト サイズがわからないことです。そのため、最大高さをテキスト サイズよりも小さく設定すると、正しく機能しません。しかし、私にとっては問題を解決します。

ありがとう、そしてこれが他の誰かに役立つことを願っています。

于 2012-09-03T16:21:50.530 に答える