时间戳

首页 > 解决方案 > 在按钮单击时添加水平手风琴

jquery - 在按钮单击时添加水平手风琴

问题描述

我想在单击按钮时添加水平手风琴。

我已经使用这个例子来创建一个水平手风琴。除了只能添加 8 个手风琴之外，这非常有效，我想要用户想要的手风琴数量。

我使用了上面的代码，然后通过单击按钮更改了手风琴创建部分。下面的代码在链接中，前提是我不希望最大值为 8。它应该是任何动态值。

li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
    width: calc(100% - 80px);
}

li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
    width: calc(100% - 320px);
}

我想要一个动态的手风琴数量的输出。如何修改css部分以适用于添加的任意数量的手风琴。对此的任何帮助都将受到高度赞赏。

标签： jquerycssbootstrap-4

解决方案

我通过添加一些 JS 对其进行了修改。希望这能帮助你理解。这将允许您添加任意数量的选项卡。我试图让它简单易行。:)

let labels = document.querySelectorAll("label");

let width = 0;

labels.forEach(label => {
  width += label.clientWidth;
});

document.documentElement.style.setProperty("--label-width", width + "px");

这是代码笔：https ://codepen.io/hunzaboy/pen/WNeOOPr

推荐阅读