Question

请注意我的代码如下。

这是我想要做的。

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

提前感谢您的帮助。

鲍勃

Answer 1

虽然无法完全按照您的问题中的详细信息进行操作，但我在此演示中创建了如何对元素（show/hide）执行#list按钮的演示。

所以，在演示中你有2个按钮＆＃34;一个用于表演，一个用于隐藏。

默认情况下，列表是隐藏的。如果您想更改此设置，只需从checked中删除#hideResult属性，然后将其添加到#showResult。

如果你想添加更多级别，你就像这个演示一样 - 你需要在radio-buttons每个元素前加上show/hide。

＆＃13;

input {
  display:none;  
}

#hideRouting:checked ~ #list {
  display:none;  
}

＆＃13;

<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>

＆＃13;

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

1 个答案: