如何使用输入和标签仅使用 CSS 创建可折叠元素？
我试图折叠一个元素，使其仅在单击隐藏输入的标签时才显示。我希望单击标签时<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 -->
这是实时版本的链接。
九州编程浏览 124回答 4
4回答
-
婷婷同学_
这应该可以做到。更改此选择器input[checked]#menu_collapse到input[type="checkbox"]:checked#menu_collapseli { 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布斯
检查这个我认为对你有用<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;} -
噜噜哒
我可以建议原生 HTML5详细信息和摘要标签的组合吗？如果您使用以下结构，您的元素对于浏览器/爬虫来说将是可折叠的并且具有语义意义。您可以像通常处理任何其他 HTML 标记一样设置所有这些元素的样式。浏览器支持也很好。<details> <summary>Menu</summary> <p>A lot of stuff</p> <ul> <li>Page 1</li> <li>Page 2</li> </ul></details> -
慕工程0101907
尝试一下 ：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>
随时随地看视频慕课网APP
相关分类
Html5