4

一部のテキスト（たとえば、100文字）が表示され、ボタンをクリックしてテキストを展開して残りのテキストを表示するTwitterブートストラップ折りたたみプラグインの使用方法を誰かが理解しましたか?

これは、私が抱えている次の問題を示す JSFiddle です。

  1. 非表示のテキストは新しい行に表示されます。文章が視覚的に途切れないことが望ましいでしょう。
  2. icon-plus-signインジケーターの表示は切り替えられません (非表示のテキストを表示しても消えず、その逆も同様です) 。

完全に動作する HTML:

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<div class="" data-toggle="collapse" data-target="#div1" >
     <span><b>Div1:</b> This is a sentence at the end of the first 100 characters that gets truncated </span>
 <i class='icon-plus-sign'></i> 
</div>
<div id="div1" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div1</b>).</div>

<div class="" data-toggle="collapse" data-target="#div2" >
 <span><b>Div2:</b>This is a sentence at the end of the first 100 characters that gets truncated </span>
 <i class='icon-plus-sign'></i> 
</div>
<div id="div2" class="collapse" >such that characters 101 to infinity are not shown inline with the beginning of the sentence (<b>Div2</b>).</div>
4

2 に答える 2

7

次の JavaScript を追加して、これを機能させました。

$("div").on("hide", function() {
    $(this).prev("div").find("i").attr("class","icon-plus-sign");
    $(this).css("display","");
    $(this).css("height","5px");
});
$("div").on("show", function() {
    $(this).prev("div").find("i").attr("class","icon-minus-sign");
    $(this).css("display","inline");
    $(this).css("height","5px");
});

そして、次の CSS:

div[data-toggle="collapse"] {
    float: left;
}

フィドルの例はこちらです。

サイドノート

個人的には、これには Bootstrap の折りたたみプラグインを使用しません。Bootstrap アイコンと組み合わせて、JQuery Expanderのような専用プラグインを使用します。

別のフィドルの例はこちらです。

于 2013-02-18T21:48:23.827 に答える
6

崩壊プラグインはこれを意図したものではないという他の投稿に同意します。これを適切に処理するものを作成するのは、実際には非常に簡単です。たとえば、非表示のテキストを次のようにラップします<span class="truncated">。

<p>
 This is the visible part <span class="truncated">this is the hidden part.</span>
</p>

次に、それを非表示にし、非表示/表示アイコンを追加して、状態を切り替えます。

$('.truncated').hide()                       // Hide the text initially
    .after('<i class="icon-plus-sign"></i>') // Create toggle button
    .next().on('click', function(){          // Attach behavior
    $(this).toggleClass('icon-minus-sign')   // Swap the icon
        .prev().toggle();                    // Hide/show the text
});

icon-minus-signこれはクラスの優先順位を利用しicon-plus-signますが、より安全に感じられる場合は、両方のトグルを追加できます.

デモ: http://jsfiddle.net/VNdmZ/4/

于 2013-02-18T22:04:13.970 に答える