javascript - Bootstrap 4 - 水平对齐的 Accordion

Question

我一直在寻找一种方法来构建 accordion在 Bootstrap 4从左到右而不是从上到下排列每个面板。此外，我正在尝试找到一种解决方案，将可点击的标题旋转 90 度并向内容的左侧旋转。

很久以前看过这个帖子:

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

但似乎没有一个解决方案有效，或者对 Accordion 无效。理想情况下， Accordion 将填充容器的 width 并保持该 width。我模拟了它在两种状态下的样子:

State One

State Two

Answer 1

可以通过一些调整来实现这一点，但在实现之前请仔细阅读要求:

考虑到您正在使用 Bootstrap 4 , 以及支持的最低 Internet Explorer 版本 is IE10 , 使用 CSS transforms 应该没有问题.但需要注意的是，在这个hacky 解决方案中，我使用的是 pointer-events ，因此，如果您想避免关闭已打开的元素，则至少需要 Internet Explorer 11。

For this solution, there must be a unique opened element at the beginning (this opened element is used to get its width and apply it to all collapsible contents). Also, the height of the accordion is updated at the beginning, so, as a fixed width and height are applied to the elements, if you want responsiveness, you should update these sizes on each viewport resize. Also, take into account that I'm not using any CSS vendor prefix in the example.

---

代码笔:

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>