12

ユーザーが「もっと読む」ことができるようにするスクリプトを、Bootstrap の折りたたみアコーディオンに置き換えたいと考えています。私の問題は、私が見た限り、アコーディオンが開いているか閉じていることです。

クローズドモードでテキストを表示するオプションについて知っている人はいますか?

現在使用しているスクリプトでは、テキスト領域の高さを変更することで一部のテキストを表示できますが、Bootstrap ではこのオプションは機能しません。.inまたは(テキスト領域の高さを制御する css)の高さを変更する.outと、その高さまで単純に開閉します。誰かがこれに対する回避策を見つけましたか?

私のHTML：

<div class="accordion" id="accordion2"> 
  <div class="accordion-group"> 
    <div class="accordion-heading"> 
      <a class="accordion-toggle"  href="#collapseOne"
         data-toggle="collapse" data-parent="#accordion2">
        TITLE OF THE COLLAPSE 
    </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
        DATA IN THE COLLAPSE 
      </div> 
    </div>
  </div>
</div>
4

2 に答える 2

4

できますよ！アコーディオンは、ブートストラップによって提供されるいくつかの自動配線を備えた単なる折りたたみコントロールです。

折りたたみが行う唯一のことは、指定されたセクションの可視性を切り替え、いくつかのアニメーションを提供することです。トグル セクションが非表示の場合でも、他の何かを表示したい場合は、トグル セクションの外に置いて、常にそこにあるようにします。崩壊しても変わりません。

メイン パネルの前に常に表示されるティーザー パネルの例を次に示します。好きなようにスタイリングできます。

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
           href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Panel - Header - 1
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body" >
      Panel - Teaser - 1
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" 
         role="tabpanel" aria-labelledby="headingOne">

      <div class="panel-body">
        Panel - Body - 1
      </div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" 
           href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Panel - Header - 2
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body">
      Panel - Teaser - 2
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" 
         role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Panel - Body - 2
      </div>
    </div>
  </div>
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
           href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Panel - Header - 3
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body">
      Panel - Teaser - 3
    </div>
    <div id="collapseThree" class="panel-collapse collapse" 
         role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Panel - Body - 3
      </div>
    </div>
  </div>
  
</div>

于 2015-05-23T22:51:53.230 に答える
1

正しく理解できたかどうかわかりませんが、タイトルの下にティーザー テキストを表示しますか? jquery を使用して、パネル タイトルにテキストを追加してみませんか。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. 
      </div>
    </div>
  </div>
</div>

$(function(){
    $("#accordion .panel").each(function(){
        var thispanel = $(this);
        var titletext = thispanel.find(".panel-body").text().substring(1, 100) + " ... click to read more";
        thispanel.find("h4.panel-title a").html(titletext);
    });
});
于 2015-10-27T17:05:52.567 に答える