在bootstrap折叠手风琴中显示部分文本 [英] Showing partial text in bootstrap collapse accordion

问题描述

我想替换一个我拥有的脚本，该脚本允许用户使用Bootstrap折叠手风琴阅读更多"内容.我的问题是，据我所见，手风琴是打开的还是关闭的.

I want to replace a script I have that allows users to "read more" with the Bootstrap collapse accordion. My problem is that as far as I've seen the accordion is either open or closed.

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

Does anyone know about an option to show some text in closed mode?

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

In the script I'm using right now I can make some text visible by changing the height of the text area, but in Bootstrap this option doesn't work. When I change the height of .in or .out (the css that controls the text area height), it simply opens and closes until that height. Has anybody found a workaround for this?

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

推荐答案

可以！手风琴只是折叠控件，它们具有由引导程序自动提供的接线.

Sure you can! Accordions are just collapse controls that have some automatic wiring provided by bootstrap.

折叠的唯一作用是切换指定部分的可见性并提供一些动画.如果您希望看到其他内容，即使隐藏了切换部分，也可以将其放在切换部分之外，以便始终存在.崩溃不会改变这一点.

The only thing the collapse does is toggle the visibility of specified section plus provide some animations. If you'd like something else to be visible, even when the toggled section is hidden, just put it outside the toggled section so it's always there. Collapsing won't change that.

这是一个带有预告面板的示例，该面板在主面板之前总是可见的.您可以根据需要设置样式.

Here's an example with a teaser panel that's always visible before the main panel. You can style it however you want.

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

这篇关于在bootstrap折叠手风琴中显示部分文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！