如何使用输入和标签仅使用 CSS 创建可折叠元素？

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>

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>