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

查看:17
本文介绍了在引导折叠手风琴中显示部分文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想替换我拥有的允许用户使用 Bootstrap 折叠手风琴阅读更多"的脚本.我的问题是,就我所见,手风琴要么是打开的,要么是关闭的.

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

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

我的 HTML:

<div class="accordion-group"><div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne"data-toggle="collapse" data-parent="#accordion2">崩溃的标题</a>

<div id="collapseOne" class="accordion-body 折叠在"><div class="accordion-inner">崩溃中的数据

解决方案

当然可以!手风琴只是折叠控件,具有一些由引导程序提供的自动接线.

折叠的唯一作用是切换指定部分的可见性并提供一些动画.如果您希望其他内容可见,即使切换部分处于隐藏状态,只需将其放在切换部分之外,以便它始终存在.折叠不会改变这一点.

这是一个带有总是在主面板之前可见的预告面板的示例.您可以随意设置样式.

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="样式表"/><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">面板 - 标题 - 1</a>

<div class="panel-teaser panel-body" >小组 - 预告 - 1

<div id="collapseOne" class="panel-collapse 折叠在"role="tabpanel" aria-labelledby="headingOne"><div class="panel-body">面板 - 主体 - 1

<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">面板 - 标题 - 2</a>

<div class="panel-teaser panel-body">小组 - 预告 - 2

<div id="collapseTwo" class="panel-collapse collapse"role="tabpanel" aria-labelledby="headingTwo"><div class="panel-body">面板 - 主体 - 2

<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">面板 - 标题 - 3</a>

<div class="panel-teaser panel-body">小组 - 预告 - 3

<div id="collapseThree" class="panel-collapse collapse"role="tabpanel" aria-labelledby="headingThree"><div class="panel-body">面板 - 车身 - 3

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?

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?

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆