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

这是我正在做的。

当页面打开，我想只能看到下面的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>

非常感谢您的帮助。

鲍勃

来源

2016-01-06 Bob

虽然不是很能遵循的细节在你的问题，我创建了怎么办show/hide按钮在这个演示的元素（#list）演示。

所以，在演示中，你有2个“按钮”一个节目，一个用于隐藏。

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

如果你想添加更多的水平，你完全可以像这个演示 - 你需要2 radio-buttons之前你想每个元素show/hide它。

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>

来源

2016-01-06 13:46:26

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

回答

相关问题