css - 在 Bootstrap 折叠 Accordion 中显示部分文本

Question

我想用 Bootstrap 折叠 Accordion 替换我拥有的允许用户“阅读更多”的脚本。我的问题是，据我所知， Accordion 不是打开就是关闭。

有人知道在关闭模式下显示一些文本的选项吗？

在我现在使用的脚本中，我可以通过更改文本区域的高度来使一些文本可见，但在 Bootstrap 中，此选项不起作用。当我更改 .in 或 .out(控制文本区域高度的 css)的高度时，它只是打开和关闭直到那个高度。有没有人找到解决方法？

我的 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>

Answer 1

当然可以! Accordion 只是collapse controls有一些由 Bootstrap 提供的自动接线。

折叠唯一做的就是切换指定部分的可见性并提供一些动画。如果您希望其他内容可见，即使切换部分被隐藏，只需将其放在切换部分之外，这样它就始终存在。折叠不会改变这一点。

这是一个始终在主面板之前可见的前导面板示例。您可以根据需要设置样式。

例子

堆栈片段中的演示

<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>