顯示隱藏列表僅使用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）

回答

相關問題