0

我正在构建一个展开/折叠元素。单击 MORE INFO 标签/按钮时，内容应展开到顶部而不是底部。

您可以在下面找到我的代码。

这是两个屏幕截图。第一个显示当前行为，第二个显示单击时的外观，内容位于 MORE INFO 标签/按钮上方。

在此处输入图像描述

我的预期结果： 在此处输入图像描述

如果您能帮我解决这个问题，那就太好了。谢谢你。

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

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

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
  /*   transition: all 0.25s ease-out; */
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100vh;
}
<input id="collapsible" class="toggle" type="checkbox">
<label for="collapsible" class="lbl-toggle">More Info</label>
<div class="collapsible-content">
  <div class="content-inner">
    <p>
      QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
      Development.
    </p>
  </div>
</div>

4

2 回答 2

1

您可以使用 flexbox 并按首选顺序对元素进行排序。

用 a 包装您的 HTML 元素，div并给包装器 adisplay: flex;并使用flex-direction: column;.

然后，您只需使用order: 1和重新排序元素order: 2。

.collaps-wrapper {
  display: flex;
  flex-direction: column;
}

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

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

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
  /*   transition: all 0.25s ease-out; */
  order: 2;
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
  order: 1;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
  max-height: 100vh;
}
<div class="collaps-wrapper">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">More Info</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
        Development.
      </p>
    </div>
  </div>
</div>

于 2020-04-19T10:44:55.773 回答
1
  • 将内容放在隐藏的复选框之后
  • 请改用此选择器.toggle:checked + .collapsible-content {

.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

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

.lbl-toggle {
  display: block;
  font-weight: bold;
  font-family: monospace;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
  color: #A77B0E;
  background: #FAE042;
  cursor: pointer;
  border-radius: 7px;
}

.collapsible-content {
  top: 0px;
  max-height: 0px;
  overflow: hidden;
  transform:
}

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

.lbl-toggle:before {content: "More "}
.toggle:checked ~ .lbl-toggle:before {content: "Less "}
<input id="collapsible" class="toggle" type="checkbox">
<div class="collapsible-content">
  <div class="content-inner">
    <p>
      QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without plug-ins. Test-Driven
      Development.
    </p>
  </div>
</div>
<label for="collapsible" class="lbl-toggle">Info</label>

于 2020-04-19T10:41:36.737 回答