我正在構(gòu)建一個(gè)展開/折疊元素。單擊“更多信息”標(biāo)簽/按鈕時(shí)，內(nèi)容應(yīng)擴(kuò)展到頂部而不是底部。下面你可以找到我的代碼。這是兩個(gè)屏幕截圖。第一個(gè)顯示當(dāng)前行為，第二個(gè)顯示單擊時(shí)的外觀，內(nèi)容位于“更多信息”標(biāo)簽/按鈕上方。我的預(yù)期結(jié)果：如果您能幫助我解決這個(gè)問題，那就太好了。謝謝。.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貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊
將內(nèi)容放在隱藏復(fù)選框的后面
請(qǐng)改用此選擇器.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貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超4個(gè)贊
您可以使用 Flexbox 并按首選順序?qū)υ剡M(jìn)行排序。
用 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 關(guān)注
- 185 瀏覽
添加回答
舉報(bào)
0/150
提交
取消