3

より多くの本文のコピーを明らかにするためにBoostrapを使用しようとしています。したがって、明らかにされたコンテンツが紹介テキストと一致している必要があります。私はこのように最後にトリガーとしてより多くのリンクを使用しています：

<p>
 Intro text <span id="intro" class="collapse"> the rest of the sentence.</span>
 <a data-toggle="collapse" data-target="#intro"> More</a>
</p>

これはdivを使用する場合は機能しますが、インライン要素を使用すると、アコーディオンが機能しなくなります。divを使用して、インラインまたはインラインブロックを表示するように設定した場合でも同様です。

インライン要素でこれを機能させる方法を知っている人はいますか？または、同じことを実現する別のjqueryプラグインまたはいくつかの単純なjqueryがあります-同じページに複数のアコーディアンがあります。

正しい方向へのポインタをいただければ幸いです。

4

3 に答える 3

3

Bootstrapのプラグインの使用は、プラグインの機能がどのように実装されているかにより、sのcollapseようなインライン要素では機能しません。<span>

Bootstrap CSSを見ると、次のルールがわかります。

.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
       -moz-transition: height 0.35s ease;
        -ms-transition: height 0.35s ease;
         -o-transition: height 0.35s ease;
            transition: height 0.35s ease;
}

.collapse.in {
    height: auto;
}

したがって、要素をゼロにして設定.collapseすることにより、要素は効果的に非表示になります。heightoverflow:hidden

ただし、インライン要素（のようなspan）は、高さや垂直方向のパディングなどのスタイルを受け入れません。したがって、.collapseクラスが追加されていても、スパンは常に表示されます。これは、を設定したときにプラグインが機能しなくなる理由も説明してdisplay:inlineいます<div>。

于 2012-08-15T02:33:58.423 に答える
1

適切な検索用語を使用した後、私は次のものを見つけて実装しました：http: //viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

于 2012-08-15T02:22:35.040 に答える
1

より具体的なスタイルを追加することで、Bootstrapのデフォルトの折りたたみスタイルを簡単にオーバーライドできます。それらによって設定されたすべてのスタイルを適切にオーバーライドするようにしてください。デフォルトでは、折りたたみはheight属性をアニメーション化することによって実行されるためheight: auto、高さのアニメーションを開始したくない場合は、3つの折りたたみ状態すべてに含める必要があります。

たとえば、次spanのようにフェードアウトすることで、インライン要素を折りたたむことができます。

span.collapse {
    display: inline;
    position: static;
    height: auto;
    opacity: 0;
    -webkit-transition: opacity 0.35s ease;
       -moz-transition: opacity 0.35s ease;
        -ms-transition: opacity 0.35s ease;
         -o-transition: opacity 0.35s ease;
            transition: opacity 0.35s ease;
}
span.collapsing {
    display: inline;
    position: static;
    height: auto;
    opacity: 0;
    -webkit-transition: opacity .35s ease;
         -o-transition: opacity .35s ease;
            transition: opacity .35s ease;
}
span.collapse.in {
    display: inline;
    position: static;
    opacity: 1;
    height: auto;
}

（このアプローチを使用して折りたたまれた場合でも、フロー内のスペースを占有するため、レイアウトのニーズに応じて、要素をアニメーション化できるようにdisplay:none、折りたたまれた状態に設定するか、すべての状態に設定する必要があります。）display:inline-blockwidth

于 2014-11-05T09:59:46.403 に答える