我试图折叠一个元素，使其仅在单击隐藏输入的标签时才显示。我希望单击标签时<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 关注
- 88 浏览
添加回答
举报
0/150
提交
取消