7

つまり、<div>内部に長いテキストがあり、高さが定義されているとします。テキストがその div の高さを超えたとき...に、テキストの最後に表示したいので、これは少しの CSS で簡単ですが、もう少し高度なものが必要です。

私が欲しいのはそれ...とボタンを持っていることです(Show more)、そして私はそれを作りましたが、それはかなり汚いハックであり、より良い解決策があるはずです.とにかく、このフィドルを見てください: http://jsfiddle.net/ DgBR2/1/

基本的に、テキストの上に白い背景を持つ別の div を浮かせただけですが、そのテキストの高さなどを変更したい場合、将来的に問題が発生するので、もっと良いものが欲しいです。

4

2 に答える 2

3

2012 年 11 月 7 日改訂

堅牢なテキスト オーバーフロー スライダー

堅牢なフィドル

機能:
1. フォント サイズ
の自動調整 2. [表示を増やす/非表示] ボタンの自動調整
3. アニメーションの速度を
簡単に変更 4. [詳細を表示/非表示] ボタンの間隔
を簡単に変更More / Show Less' の表示
6. 最初に表示するテキストの行数を簡単に設定

JQuery

//Editable Values

var lines = 5; //Choose how many lines you would like to initially show
var buttonspacing = 7; //Choose Button Spacing
var buttonside = 'right'; //Choose the Side the Button will display on: 'right' or 'left'
var animationspeed = 1000; //Choose Animation Speed (Milliseconds)


//Do not edit below

var lineheight = $('.text').css("line-height").replace("px", "");
startheight = lineheight * lines;
$('.text_container').css({'height' : startheight });

var buttonheight =  $('.button').height();

$('div.container').css({'padding-bottom' : (buttonheight + buttonspacing ) });

if(buttonside == 'right'){
    $('.button').css({'bottom' : (buttonspacing / 2), 'right' : buttonspacing });
}else{
   $('.button').css({'bottom' : (buttonspacing / 2), 'left' : buttonspacing });
}

$('.open').on('click', function(){
        var newheight = $(this).parent('div.container').find('div.text').height();
        $(this).parent('div.container').find('div.text_container').animate({'height' : newheight }, animationspeed );
        $(this).hide().siblings('.close').show();

        });

$('.close').on('click', function(){
    var h = $(this).parent('div.container').find('div.text').height();
    $(this).parent('div.container').find('div.text_container').animate({'height' : startheight }, animationspeed );
    $(this).hide().siblings('.open').show();
    });


$('div.container').each(function(){
    if( $(this).find('div.text').height() >= $(this).find('div.text_container').height() ){
        $(this).find('.button.open').show();

    }
});

HTML

<div class="container">
    <div class="text_container">
        <div class='text'>

           // Text goes Here

        </div>
     </div>
    <div class='button open'>...Show More</div>
    <div class='button close'>...Show Less</div>
</div>

CSS

.button {position:absolute; z-index:5; display:none; cursor:pointer; color:#555555;}
.close {display:none; }
.open {display:none;}

.container{
    width:200px;
    overflow:hidden;
    border:1px solid #cacaca;
    border-radius:5px;
    font-size:12px;
    position:relative;
    margin:auto;
    padding:10px 10px 0px 10px;
    float:left;
    margin:5px;
}

.text_container{
    height:105px;
    overflow:hidden;

}

.text {}
于 2012-11-06T21:20:12.107 に答える
1

より堅牢にするために、新しい高さを設定するのではなく、設定した高さを削除するだけです。これにより、コンテナはその内容がいくら大きくても成長できます。

.collapsedまた、 CSSの高さの値をある値との間で前後に設定するのではなく、のような別のクラスを使用し、そのクラスを切り替えることをお勧めしますauto。

編集したフィドルは次のとおりです：http：//jsfiddle.net/DgBR2/9/

新しいJS：

$(".enlarge").click(function(){
    $(this).siblings('.text').toggleClass('collapsed');   
});

新しいCSS：

.container{
    width:200px;
    border:1px solid #cacaca;
    font-size:12px;
    position:relative;
    margin:auto;
    padding: 10px 10px 26px;
}

.text.collapsed {
    height: 100px;
    overflow: hidden;
}

.enlarge{
    position:absolute;
    height: 21px;
    bottom: 0;
    left: 0; right: 0; text-align: center;
    color:blue;
}

OK、アニメーションを保存するために回答を編集しています。このソリューションは少しトリッキーで、3つの重要なことが含まれます。

  1. 要素が折りたたまれていないときにクラス分けされた要素のheight値を取得します。これにより、マジックナンバーを使用せずに要素を目的の高さまで折りたたむことができます。.collapsedこれを行うには、新しい要素を作成して.collapsedクラスを指定し、その新しい（レンダリングされていない）要素の高さを確認します。

  2. 展開された要素が折りたたまれたときに完全な高さを取得して、新しい高さにアニメートできるようにします-値.animate()では機能しないためautoです。

  3. アニメーションの完了後に設定height値を削除すると、テキスト要素の高さが固定されず、後でコンテンツを変更した場合に自動的に拡大/縮小されます。

これが新しいアニメーション対応のフィドルです：http：//jsfiddle.net/DgBR2/13/

そして、JSは次のようになります。

$(".enlarge").click(function(){
    var btn = $(this),
        text = btn.siblings('.text'),
        collapsed = text.hasClass('collapsed'),
        // predict the height that the element SHOULD be: its full (scroll) height if it is currently collapsed, or the value of the 'height' CSS property that it will have when collapsed if it is not currently collapsed
        height = collapsed ? text[0].scrollHeight : $('<div>', {'class': 'text collapsed'}).css('height');


    text.animate({'height': height}, 400, function() {
        // do all further changes after the animation completes
       text.toggleClass('collapsed'); // we use this class for our animation logic, so we need to toggle it correctly
       text.css('height', ''); // we don't want the text element to have a fixed height, so remove whatever height we set earlier
       btn.text(collapsed ? 'Show Less' : '...(Show More)');
    });    

});

さらにモジュール化するための最後の編集：マークアップからエキスパンダーdivを削除し（セマンティックではないため）、JSに追加します。このアプローチにより、1）コンテンツがオーバーフローしないテキストコンテナにエキスパンダーボタンがないこと、2）新しいテキストdivを追加したり、既存のテキストdivのコンテンツを変更したりするときにエキスパンダーボタンを正しく表示/非表示にできることも保証されます。

JSをスケッチして、前の反復からどのように変更されたかを示します。

// PSEUDOCODE
$(document).ready(function() {
    var addExpander = function() {
            if (this.scrollHeight <= collapsedHeight) {
                // remove expander button if it exists
            } else if (this /* contains no expander button */) {
                // add the expander with its click function
            }
        };

    // call it on all collapsed text divs currently in the document
    $('.text.collapsed').each(addExpander);

    // how to call it again after changing a text div's content:
    addExpander.call(/* your changed div */);
});

作業デモ： http： //jsfiddle.net/DgBR2/18/

于 2012-11-06T21:34:48.287 に答える