我有一个约会列表,并且有一个可折叠的切换,可以显示/隐藏更多详细信息。除了可折叠面板之外,我还想加入一个加号/减号,当点击时可以变形。我在另一个stackoverflow条目中找到了该项的代码,并在下面的accordion toggle类中表示:
<div style="margin-right:auto;">
<a class="flex accordion-toggle collapsed" data-toggle="collapse" href="#{{item.sys_ID}}" role="button" aria-expanded="false" aria-controls="collapseDetails">
<span class="h4 m-l-xs" >{{item.id}}: {{item.name}}</span>
<i ng-if="item.required==true" class="fa fa-exclamation-circle mandatory m-l-xs"></i>
</a>
<div>
<small class="text-muted"><span class="m-l-xs">{{item.description}}</span></small>
<small class="text-muted"><i class="fa fa-clock-o m-l-xs"></i><span style="padding-left: 5px;">{{item.duration}} hour(s)</span></small>
</div>
</div>
.flex {
display: flex;
align-items: center;
}
.accordion-toggle {
position: relative;
}
.accordion-toggle::before,
.accordion-toggle::after {
content: '';
display: block;
position: absolute;
width: 14px;
height: 4px;
background-color: #000;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.accordion-toggle::before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
.accordion-toggle.collapsed::before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
}
.accordion-toggle.collapsed::after {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
我这里的问题是手风琴切换的位置与我的列表重叠。我尝试了各种方法,但不知道如何将列表向右推,以便为加号/减号腾出空间。上面的CSS对我来说相当高级,所以我甚至不确定加号/减号是如何创建的。感谢您的指导!