3

div があり、動的に入力される段落が含まれています。段落が 20 行の場合もあれば、3 行の場合もあります。

divがこれよりも大きい場合（段落に行が多いため）、高さ制限を設定して、3行のテキストのみを表示するように縮小し、「さらに表示」ボタンを表示します要求に応じて div を展開および/または折りたたんで、段落の残りの行を表示します。

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

これをできるだけ簡単に行うためのヒントはありますか?

4

8 に答える 8

4

これは、いくつかの単純な Javascript (jQuery は必要ありません) といくつかの CSS クラスを使用して行うことができます。設計を簡素化するために、セットの最小高と最大高を想定します。

デモ： jsフィドル

脚本：

document.getElementById( 'slide' ).addEventListener( 'click', function() {
    var body = document.getElementById( 'slide-body' );
    if( body.className == 'expanded' ) {
        body.className = '';
        document.getElementById( 'more' ).textContent = 'more...';
    } else {
        body.className = 'expanded';
        document.getElementById( 'more' ).textContent = 'less...';
    };
} );

HTML:

<div id="slide">
    <div id="slide-body">
    A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. A really long paragraph. 
    </div>
    <div id="more">more...</div>
</div>

CSS:

#slide {
    border: 1px solid black;
}
#slide-body{
    height: 55px;    
    overflow: hidden;
    transition:             height 500ms ease;
        -moz-transition:    height 500ms ease;
        -ms-transition:     height 500ms ease;
        -o-transition:      height 500ms ease;
        -webkit-transition: height 500ms ease;
}
.expanded {
    height: 150px !important;
}
#more {    
    cursor: pointer;
    text-align: right;
}
于 2013-02-20T00:32:03.747 に答える
4

正確に 3 行が必要な場合、これは高さが であることを意味することに注意してください3*line-height。次に、これを行うことができます：

HTML

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>...</p>
  <a>More</a>
</div>

CSS

p {
    line-height: 18px;
    height: 54px;
    overflow: hidden;
}

overflow: hiddenコンテナの境界を超えるコンテンツを非表示にします。

jQuery

次に、高さの制約を切り替えます。

$('a').click(function() {
    var p = $('a').prev('p')
    var lineheight = parseInt(p.css('line-height'))
    if (parseInt(p.css('height')) == lineheight*3) {
       p.css('height','auto');
       $(this).text('Less')
    } else {
       p.css('height',lineheight*3+'px');
       $(this).text('More')
    }
});

デモを参照してください。

于 2013-02-20T00:36:17.557 に答える
0

個人的には、max-height と overflow:auto; を設定するのが最善の方法だと思います。このようにして、3 行にちょうど収まるように十分に小さく保つか、設定された高さまで簡単に拡張して、段落の残りの部分を適切に調整できます。お役に立てれば。

于 2013-02-20T00:19:59.570 に答える
0

コードを表示するために adnbutton.com が行ったことに沿って何かを試してみることをお勧めします。それがあなたのやりたいことだと思います。3 行以上ある場合にのみこれを行いたい場合は、jQuery などでこれを行う必要があります。

于 2013-02-20T00:05:22.943 に答える
0

ブートストラップを使用できる場合は、bootstrap.javascript.collapse をご覧ください。私が書いたような簡単で高速なソリューションが見つかります: http://getbootstrap.com/javascript/#collapse

<div class="collapse" id="collapseExample">
<div class="hero-unit collapse" id="collapseHeroeUnit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Expand the div
</button>
于 2015-02-09T11:32:39.360 に答える
0

簡単な解決策は、高さを固定することです。

<div class="hero-unit">
  <h1>Product Description</h1>
  <p>{{paragraph}}</p>
</div>

少なくとも 1 つ<h1>( ps: 複数の<h1>タグを使用することはお勧めできません) と<p>があると確信しているため、高さはおおよそ100px.

最初の簡単な方法は、固定の高さを設定することです:

.hero-unit {height: 100px; overflow: hidden;}

これにより、コンテンツが突然切断されます。もっと良いものが必要な場合は、透明から白にフェードする画像を配置することができます。次のように言います。

.hero-unit {height: 100px; overflow: hidden; position: relative;}
.hero-unit img.fade {position: absolute; bottom: 0;}

したがって、このテクニックはコンテンツを急激にカットするのではなく、滑らかなフェード効果を与えます。

最後はプラグインの使用です。コンテンツ全体を表示してスクロールバーを表示するか、ユーザー インタラクションの後に表示するかを選択できます。最初のものを好む場合は、jScrollPaneを選択してください。または、後者を好む場合は、dotdotdotを使用するか、以下のスクリプトが役立つ場合があります。

var p = $('.hero-unit p');
var divh = $('.hero-unit').height();
while ($(p).outerHeight() > divh) {
    $(p).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}
于 2013-02-20T00:20:22.820 に答える
0

http://jsfiddle.net/zRjdD/2/

$('.hero-unit').each(function () {
    var ht = $(this).height();
    if (ht > '200') {
        var button = $('<span class="btn">Show all</button>');
        $(this).children('p').css('height', '50px');
        $(this).append(button);
    }
});

$('.btn').on('click', function () {
    $(this).hide();
    $(this).prev('p').css('height', 'auto');
});
于 2013-02-20T00:22:02.790 に答える