仅使用 CSS 显示隐藏列表（无 JavaScript）答案

【问题标题】：Show Hide List Using Only CSS (No JavaScript)仅使用 CSS 显示隐藏列表（无 JavaScript）
【发布时间】：2016-04-10 12:35:34
【问题描述】：

请注意我的代码如下。

这就是我想要做的。

当页面打开时，我希望只显示以下 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

每个班级大纲项目都是指向另一个页面的链接，该页面是该班级的大纲。出于演示目的，我已链接到 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>

提前感谢您的帮助。

鲍勃

【问题讨论】：

标签： css hide show collapse expand

【解决方案1】：

虽然不太能够了解您问题中的详细信息，但我在此演示中创建了一个演示，说明如何将 show/hide 按钮添加到元素 (#list)。

因此，在演示中，您有 2 个“按钮”，一个用于显示，一个用于隐藏。

默认情况下，列表是隐藏的。如果你想改变这一点，你只需要从#hideResult 中删除checked 属性并将其添加到#showResult。

如果你想添加更多关卡，你可以像这个演示那样做——你需要在每个要show/hide它的元素之前加上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>

【讨论】：