我正在構建一個展開/折疊元素。單擊“更多信息”標簽/按鈕時，內容應擴展到頂部而不是底部。下面你可以找到我的代碼。這是兩個屏幕截圖。第一個顯示當前行為，第二個顯示單擊時的外觀，內容位于“更多信息”標簽/按鈕上方。我的預期結果：如果您能幫助我解決這個問題，那就太好了。謝謝。.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>
2 回答
慕森王
TA貢獻1777條經驗 獲得超3個贊
將內容放在隱藏復選框的后面
請改用此選擇器.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>
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
您可以使用 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>
- 2 回答
- 0 關注
- 166 瀏覽
添加回答
舉報
0/150
提交
取消