我想替换一个允许用户使用 Bootstrap 折叠手风琴“阅读更多内容”的脚本。我的问题是,据我所知,手风琴要么打开,要么关闭。
有谁知道在关闭模式下显示一些文本的选项?
在我现在使用的脚本中,我可以通过更改文本区域的高度来使一些文本可见,但在 Bootstrap 中此选项不起作用。当我改变高度时.in
or .out
(控制文本区域高度的CSS),它只是打开和关闭直到该高度。有人找到解决方法吗?
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>
你当然可以!手风琴只是塌陷控制 https://getbootstrap.com/docs/3.4/javascript/#collapse有一些由 bootstrap 提供的自动接线。
折叠所做的唯一事情是切换指定部分的可见性并提供一些动画。如果您希望其他内容可见,即使切换部分被隐藏,只需将其放在切换部分之外,这样它就始终存在。崩溃不会改变这一点。
这是一个带有预告片面板的示例,该面板始终在主面板之前可见。您可以随心所欲地设计它。
Example
堆栈片段中的演示
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)