请注意我的代码在下面。
这是我正在尝试做的事情。
当页面打开时，我希望只有以下 2 个可扩展元素可见:
Routing and Switching Classes
Security Classes
换句话说，我想把所有东西都折叠起来。
当您单击上述任一元素时，我希望仅按如下方式展开该元素:
路由和交换类
Certification Classes
Product Classes
或
Security Classes
Certification Classes
Product Classes
当您单击认证类别或产品类别元素时，我希望只展开该元素，如下所示:
Certification Classes
Class Outline 1
Class Outline 2
Class Outline 3
或
Product Classes
Class Outline 1
Class Outline 2
Class Outline 3
每个类(class)大纲元素都将链接到另一个页面，该页面是该类(class)的大纲。出于演示目的，我已链接到 www.weather.com。
这是展开所有内容后的样子:
[隐藏路由和交换类]
[Certification Classes]
1.Class Outline 1
2.Class Outline 2
3.Class outline 3
[Product Training Classes]
1.Class Outline 1
2.Class Outline 2
3.Class outline 3
[Hide Security Classes]
[Certification Classes]
1.Class Outline 1
2.Class Outline 2
3.Class outline 3
[Product Training Classes]
1.Class Outline 1
2.Class Outline 2
3.Class outline 3
我遇到的问题是，当我打开页面时，默认情况下所有内容都会展开，而不仅仅是显示路由和交换类以及安全类元素。
我想继续使用纯 CSS。
下面是我的代码。你能帮我么？将不胜感激。
提前致谢:
<!DOCTYPE html>
菜单模型
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }
</style>
<div>
<a href="#" class="hide">[Hide Routing and Switching Classes]</a>
<a href="#" class="show">[Display Routing and Swithing Classes]</a>
<ol id="list">
<div>
<a href="1" class="hide">[Certification Classes]</a>
<a href="1" class="show">[Certification Classes]</a>
<ol id="list">
<br>
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
<div>
<a href="2" class="hide">[Product Training Classes]</a>
<a href="2" class="show">[Product Training Classes]</a>
<ol id="list">
<br>
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
</ol>
</div>
<div>
<a href="3" class="hide">[Hide Security Classes]</a>
<a href="3" class="show">[Display Security Classes]</a>
<ol id="list">
<div>
<a href="4" class="hide">[Certification Classes]</a>
<a href="4" class="show">[Certification Classes]</a>
<ol id="list">
<br>
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
<div>
<a href="5" class="hide">[Product Training Classes]</a>
<a href="5" class="show">[Product Training Classes]</a>
<ol id="list">
<br>
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
</ol>
</div>
预先感谢您的帮助。
鲍勃
最佳答案
虽然不能完全理解你问题中的细节，但我创建了一个演示，演示如何对元素 (#list) 执行 show/hide 按钮演示。
因此，在演示中您有 2 个“按钮”，一个用于显示，一个用于隐藏。
默认情况下，列表是隐藏的。如果要更改此设置，只需从 #hideResult 中删除 checked 属性并将其添加到 #showResult。
如果你想添加更多级别，你可以像这个演示一样做 - 你需要在每个你想要显示/隐藏的元素之前有 2 个radio-buttons。
input {
display:none;
}
#hideRouting:checked ~ #list {
display:none;
}<label for="hideRouting">[Hide Routing and Switching Classes]</label>
<label for="showRouting">[Display Routing and Swithing Classes]</label>
<input type="radio" id="hideRouting" name="routing" checked />
<input type="radio" id="showRouting" name="routing" />
<ol id="list">
<div>
<a href="1" class="hide">[Certification Classes]</a>
<a href="1" class="show">[Certification Classes]</a>
<ol id="list">
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
<div>
<a href="2" class="hide">[Product Training Classes]</a>
<a href="2" class="show">[Product Training Classes]</a>
<ol id="list">
<li><a href=http://www.weather.com>Class Outline 1</a></li>
<li>Class Outline 2</li>
<li>Class outline 3</li>
</ol>
</div>
</ol>关于css - 仅使用 CSS 显示隐藏列表(无 JavaScript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34632809/