我根据以下问题编写了我的代码,但在修改后的版本中无法达到我想要的预期结果:
http://jsfiddle.net/kylebellamy/q9GLR/180/
https://dev59.com/6Gcs5IYBdhLWcg3w5H5a#12592438
如您所见,在我的代码中,我希望手风琴的一个面板水平打开/关闭,而另一个始终保持打开状态。我几乎做到了,但是我仍然有第二个(打开的)面板文本方面的问题:它应该使用所有剩余的页面宽度,但它没有,文本超出了底部的面板区域。
您有任何想法应该怎么做吗?
请在此处查看我的代码:
<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" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-content">
<ul>
<li>Link#1</li>
<li>Link#2</li>
<li>Link#3</li>
<li>Link#4</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-content">
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. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
这里是CSS:
.panel-group {
width:100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
}
.panel-heading {
width: 100%;
}
.panel-body {
height:200px;
}
.panel-group .panel-content {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0%) rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: translateX(0%) rotate(90deg);
-moz-transform-origin: left top;
-o-transform: translateX(0%) rotate(90deg);
-o-transform-origin: left top;
transform: translateX(0%) rotate(90deg);
transform-origin: left top;
}
.panel-group .panel .panel-content {
margin-left:520px;
position: absolute;
}
这里是 jsfiddle 上的示例:https://jsfiddle.net/dbahiense/p4bkt6ed/