如何解决2列手风琴
我想编写一个2列的手风琴,但是我不想使用js或bootstrap。
手风琴中的元素数量未知。 元素的数量是否为奇数都没有关系,但是如果是这样,则最后一个元素可以显示在左列中。
我使用流体模板(
<div>
<f:for each="{field.element}" as="element" iteration="iter">
<div class="element">
<span class="title">{acc.title}</span>
<div class="text">
<span>{acc.text}</span>
</div>
</div>
</f:for>
</div>
css:
.element {
border-bottom: 1px solid #B0B7BA;
padding-bottom: 8px;
width: 100%;
}
.title {
width: 100%;
padding-right: 24px;
cursor: pointer;
}
.title:after {
content: '';
position: absolute;
display: block;
width: 24px;
height: 24px;
right: 0;
top: 6px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s ease-in-out;
}
.text {
height: 0;
overflow: hidden;
pointer-events: none;
}
.active .text {
padding-top: 24px;
}
.active .title:after {
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。