我试图设计一个可扩展的目录。以下 CSS + HTML 在单击文本部分时显示隐藏的列表项:
CSS:
#droplist, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #droplist { display:block; }
HTML:
<div style="padding-left:40px">
<a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
<ul id="droplist" style="margin-top: 4px">
<li><a href="#">1.1 Object 1</a></li>
<li><a href="#Lnk">1.2 Object 2</a></li>
</ul>
</div>
但是，此列表仅限于单个嵌套；如果我要从对象 2 进一步扩展，我需要添加额外的填充。
下面的代码无法调用下拉列表:
<ul>
<li><a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a></li>
<ul id="droplist" style="margin-top: 4px">
<li><a href="#">1.1 Object 1</a></li>
<li><a href="#Lnk">1.2 Object 2</a></li>
</ul>
</ul>
如何在保持“按钮”功能的同时保持列表格式？ JSFiddle:http://jsfiddle.net/N79nP/463/
感谢您的帮助。
最佳答案
在您的代码中，将第一个 ul 标记的 li 标记放在列表的末尾，如下所示。它会解决您的问题。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
ul {list-style: none;}
li {display: block}
#droplist, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #droplist { display:block; }
.hide {text-decoration: none;}
.show {text-decoration: none;}
</style>
</head>
<body>
<div style="padding-left:40px">
<a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
<ul id="droplist" style="margin-top: 4px">
<li><a href="#">1.1 Object 1</a></li>
<li><a href="#Lnk">1.2 Object 2</a></li>
</ul>
</div>
<ul>
<li><a href="#">1. Stuff</a><a href="#" class="hide"> [+]</a> <a href="#" class="show">[-]</a>
<ul id="droplist" style="margin-top: 4px">
<li><a href="#">1.1 Object 1</a></li>
<li><a href="#Lnk">1.2 Object 2</a></li>
</ul>
</li>
</ul>
</body>
</html>编辑:以下代码适用于网络列表。
ul {list-style: none;}
li {display: block;}
.droplist, .hide {display: none;}
.submenu:focus-within>.hide{display: inline;}
.submenu:focus-within>.show{display: none;}
.submenu:focus-within>.droplist{display: block;}
.hide:focus~.droplist{display: none;}
.hide:focus+.show{display: inline;}
.hide:focus{display: none !important;}
.hide, .show{text-decoration: none;}<html>
<body>
<ul>
<li class="submenu">
<a href="#">1. Item 1</a>
<a href="#" class="hide">[-]</a>
<a href="#" class="show">[+]</a>
<ul class="droplist">
<li>
<a href="#">1.1 subitem 1</a>
</li>
<li class="submenu">
<a href="#">1.2 subitem 2</a>
<a href="#" class="hide">[-]</a>
<a href="#" class="show">[+]</a>
<ul class="droplist">
<li class="submenu">
<a href="#">1.2.1 sub-subitem 1</a>
<a href="#" class="hide">[-]</a>
<a href="#" class="show">[+]</a>
<ul class="droplist">
<li>
<a href="#">1.2.1.1 sub-sub-subitem 1</a>
</li>
<li class="submenu">
<a href="#Lnk">1.2.1.2 sub-sub-subitem 2</a>
<a href="#" class="hide">[-]</a>
<a href="#" class="show">[+]</a>
<ul class="droplist">
<li>
<a href="#">1.2.1.2.1 sub-sub-sub-subitem 1</a>
</li>
<li>
<a href="#">1.2.1.2.2 sub-sub-sub-subitem 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">1.2.2 sub-subitem 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>关于html - 带有按钮的可扩展目录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51942158/