css - 相邻的 CSS 可折叠小部件

Question

我使用本教程 ( https://alligator.io/css/collapsible/ ) 创建了 2 个可折叠小部件。我需要标题标签在同一行上彼此相邻，可折叠部分占据两个标题的长度，如图所示。如何才能做到这一点？

我尝试过使用position: absolute;，但是一个标题仍然无法选择，并且它所包围的包含边框仍然不受其扩展的影响，这是一个问题。

另外，如果一个可折叠的小部件打开，另一个自动关闭，我将如何做到这一点？

标签： csscss-animationscss-transforms

Answer 1

你需要改变几件事：

1. 更改您的 HTML 结构。
2. 默认选中第一个单选，默认显示第一个选项卡内容。
3. 在 wrapper 元素中，更改display: gridbydisplay: flex和wrap内容
4. 我做了很多必要的修改，CSS所以检查一下。

body {
  font-family: consolas;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input.collapse[type="radio"] {
  display: none;
}

.lbl-toggle {
  cursor: pointer;
  border: solid 1px #FAE042;
  transition: all 0.25s ease-out;
  order: 1;
  display: block;
  padding: .3rem 1rem;
  width: 50%;
  background-color: rgba(250, 224, 66, .2);
  font-weight: bold;
}

.lbl-toggle:hover {
  color: #000;
}

.lbl-toggle:first-of-type {
  border-top-left-radius: 7px;
}

.lbl-toggle:last-of-type {
  border-top-right-radius: 7px;
}

.collapsible-content {
  overflow: hidden;
  width: 100%;
  max-height: 0;
  order: 2;
  padding: 0 1rem;
  background-color: #FAE042;
  border-bottom: 1px solid rgba(250, 224, 66, .45);
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  display: inline-block;
}

.toggle:checked+.lbl-toggle {
  background-color: #FAE042;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100%;
}

.collapsible-content th.head {
  padding: 6px 4px;
  font-size: small;
}

.collapsible-content td.data {
  padding: 6px 4px;
}

.lbl-toggle::after {
  content: " ";
  display: inline-block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-left: 0.7rem;
  transition: transform 0.2s ease-out;
}

.toggle:checked+.lbl-toggle::after {
  transform: rotate(90deg);
}

.toggle:checked+.lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

<div class="wrapper">
  <input class="collapse toggle" id="#collapsible1" type="radio" name="collapsibleItem" checked/>
  <label for="#collapsible1" class="lbl-toggle">
        Header 1        
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat.</p>
  </div>


  <input class="collapse toggle" id="#collapsible2" type="radio" name="collapsibleItem" />
  <label for="#collapsible2" class="lbl-toggle">
          Header 2          
        </label>
  <div class="collapsible-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum, sapien et
      consectetur finibus, elit ex sodales purus, vel pretium libero lectus feugiat erat. </p>
  </div>
</div>

对于第二个问题，您可以使用单选按钮而不是复选框。

<input id="collapsible1" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible2" name="collapsibleItem" class="toggle" type="radio">
<input id="collapsible3" name="collapsibleItem" class="toggle" type="radio">

input[type='radio'] {
  display: none;
}

请注意，所有收音机都具有相同的名称属性；当您检查一个新收音机时，这是取消标记当前标记的收音机所必需的。