Bootstrap 4 - 水平对齐手风琴

Posted 2023-03-06

【中文标题】Bootstrap 4 - 水平对齐手风琴

【英文标题】：Bootstrap 4 - horizontal aligned accordion

【发布时间】：2017-12-17 10:43:44

【问题描述】：

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

我很久以前就看过这个帖子：

Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

但似乎没有任何解决方案有效，或者对于手风琴。理想情况下，手风琴将填充容器的width 并保持width。我模拟了它在两种状态下的样子：

State One

State Two

【问题讨论】：

我也在寻找这样的解决方案。我认为这将非常有用。

您是否曾经为此找到解决方案？我目前正在整理一些东西，但一个例子会很好。谢谢

我找到了this answer，它看起来就像你要找的东西

【参考方案1】：

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

考虑到您使用的是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>

【讨论】：

不错。我会试一试。谢谢埃尔

在刷新浏览器之前没有响应。

@Edgard 阅读了这部分答案：因此，由于对元素应用了固定的宽度和高度，如果您想要响应，您应该在每次调整视口大小时更新这些尺寸。 只需添加一个resize 事件并更新每个窗口调整大小的值。