我試圖折疊一個元素，使其僅在單擊隱藏輸入的標簽時才顯示。我希望單擊標簽時<section>將 更改為display: none。display: block我有以下樣式和 html。li { list-style-type: none;}li::before { content: "\00a0+"; }section.site_navigation { background-color: #eed; display: none;}input#menu_collapse { display: none;}label[for=menu_collapse] { display: block; margin: 5px; padding: 3px; background-color: #027; color: #ffe; font-weight: bold;}input[checked]#menu_collapse + label[for=menu_collapse] + section.site_navigation { display: block;}<input type="checkbox" id="menu_collapse"><label for="menu_collapse">Menu</label><section class="site_navigation"> <p>A lot of stuff</p> <ul> <li>Page 1</li> <li>Page 2</li> </ul></section><!-- the section is supposed to appear when the damned label is clicked on -->這是實時版本的鏈接。
4 回答
婷婷同學_
TA貢獻1844條經驗 獲得超8個贊
這應該可以做到。更改此選擇器
input[checked]#menu_collapse
到
input[type="checkbox"]:checked#menu_collapse
li {
list-style-type: none;
}
li::before {
content: "\00a0+";
}
section.site_navigation {
background-color: #eed;
display: none;
}
input#menu_collapse {
display: none;
}
label[for="menu_collapse"] {
display: block;
margin: 5px;
padding: 3px;
background-color: #027;
color: #ffe;
font-weight: bold;
}
input[type="checkbox"]:checked#menu_collapse
+ label[for="menu_collapse"]
+ section.site_navigation {
display: block;
}
<input type="checkbox" id="menu_collapse">
<label for="menu_collapse">Menu</label>
<section class="site_navigation">
<p>A lot of stuff</p>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</section>
<!-- the section is supposed to appear when the damned label is clicked on -->
HUX布斯
TA貢獻1876條經驗 獲得超6個贊
檢查這個我認為對你有用
<input type="checkbox" id="menu_collapse" >
<label for="menu_collapse" > menu</label>
<section class="site_navigation">
? <p>A lot of stuff</p>
? ?<ul>
? ? ?<li>Page 1</li>
? ? ?<li>Page 2</li>
? ?</ul>
?</section>
CSS代碼
input[type='checkbox'] {
? display: none;
}
label[for="menu_collapse"] {
? display: block;
? padding: 1rem;
? color: #A77B0E;
? background: #FAE042;
}
label[for="menu_collapse"]:hover {
? color: #7C5A0B;
}
label[for="menu_collapse"]::before {
? content: ' ';
? display: inline-block;
? border-top: 5px solid transparent;
? border-bottom: 5px solid transparent;
? border-left: 5px solid currentColor;
? vertical-align: middle;
? margin-right: .7rem;
? transform: translateY(-2px);
? transition: transform .2s ease-out;
}
input[type="checkbox"]:checked? {
? transform: rotate(90deg) translateX(-3px);
}
.site_navigation {
? max-height: 0px;
? overflow: hidden;
? transition: max-height .25s ease-in-out;
}
input[type="checkbox"]:checked + label[for="menu_collapse"] + .site_navigation {
? max-height: 100vh;
}
input[type="checkbox"]:checked + label[for="menu_collapse"] {
? border-bottom-right-radius: 0;
? border-bottom-left-radius: 0;
}
嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
我可以建議原生 HTML5詳細信息和摘要標簽的組合嗎？
如果您使用以下結構，您的元素對于瀏覽器/爬蟲來說將是可折疊的并且具有語義意義。您可以像通常處理任何其他 HTML 標記一樣設置所有這些元素的樣式。瀏覽器支持也很好。
<details>
? <summary>Menu</summary>
? <p>A lot of stuff</p>
? <ul>
? ? <li>Page 1</li>
? ? <li>Page 2</li>
? </ul>
</details>
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
嘗試一下 ：
li {
list-style-type: none;
}
li::before {
content: "\00a0+";
}
section.site_navigation {
background-color: #eed;
display: none;
}
input#menu_collapse {
display: none;
}
label[for=menu_collapse] {
display: block;
margin: 5px;
padding: 3px;
background-color: #027;
color: #ffe;
font-weight: bold;
}
input[checked]#menu_collapse + label[for=menu_collapse] + section.site_navigation {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<label for="menu_collapse" data-toggle="collapse" data-target="#demo">MENU</label>
<section id="demo" class="collapse">
<p>A lot of stuff</p>
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</section>
</div>
</body>
</html>
- 4 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消