我一直在寻找一种在Bootstrap 4中构建手风琴的方法,该手风琴将每个面板从左到右排列,而不是从上到下排列。此外,我正在尝试找到一个解决方案,将可点击标题旋转90度并在内容的左侧。
我从前一段时间见过这篇文章:
Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical
但是这些解决方案似乎都不起作用,也不适用于手风琴。理想情况下,手风琴将填充容器的 width 并保持该宽度。我嘲笑了两个州的样子: State One State Two
提前致谢!
答案 0 :(得分:2)
可以通过一些调整来实现,但是在实施前请仔细阅读要求:
考虑到您正在使用Bootstrap 4和受支持的最低Internet Explorer版本is IE10,使用CSS transforms应该不会有问题。但是请务必注意,在此 hacky 解决方案中,我正在使用pointer-events,因此,如果要避免关闭已打开的元素,请至少使用Internet Explorer 11。它。
对于此解决方案,开头必须有一个唯一的打开元素(此打开元素用于获取其宽度并将其应用于所有可折叠内容)。另外,手风琴的高度会在一开始进行更新,因此,将固定的宽度和高度应用于元素时,如果要提高响应速度,则应在每次视口调整大小时更新这些大小。另外,请注意在示例中我没有使用任何CSS供应商前缀。
https://codepen.io/elchininet/pen/wLMxpB
var horizontalAccordions = $(".accordion.width");
horizontalAccordions.each(function() {
var accordion = $(this);
var collapse = accordion.find(".collapse");
var bodies = collapse.find("> *");
accordion.height(accordion.height());
bodies.width(bodies.eq(0).width());
collapse.not(".show").each(function() {
$(this).parent().find("[data-toggle='collapse']").addClass("collapsed");
});
});
.accordion.width {
border: 1px solid rgba(0, 0, 0, 0.125);
display: flex;
}
.accordion.width .card {
flex-direction: row;
flex-grow: 0;
flex-shrink: 1;
min-width: min-content;
}
.accordion.width .card .card-header {
cursor: pointer;
transform: rotate(180deg);
writing-mode: vertical-rl;
}
.accordion.width .card .card-header:not(.collapsed) {
pointer-events: none;
}
.collapsing.width {
transition: width 0.35s ease;
height: auto;
width: 0;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="accordion width" id="accordionHorizontalExample">
<div class="card">
<div class="card-header" data-toggle="collapse" data-target="#collapseOne">
Collapsible Group Item 1
</div>
<div id="collapseOne" class="collapse show width" data-parent="#accordionHorizontalExample">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" data-toggle="collapse" data-target="#collapseTwo">
Collapsible Group Item 2
</div>
<div id="collapseTwo" class="collapse width" data-parent="#accordionHorizontalExample">
<div class="card-body">
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.
</div>
</div>
</div>
<div class="card">
<div class="card-header" data-toggle="collapse" data-target="#collapseThree">
Collapsible Group Item 3
</div>
<div id="collapseThree" class="collapse width" data-parent="#accordionHorizontalExample">
<div class="card-body">
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.
</div>
</div>
</div>
</div>