純粋なCSS：無制限のネスティングアコーディオン？

純粋なCSSとhtml無制限のネスティングアコーディオンを作成する方法はありますか？私はベースとして以下を持っていますが、アコーデオンの中にアコーディオンを入れようとすると、動作しないようです。例えばsubaccordion2 純粋なCSS：無制限のネスティングアコーディオン？

ためsubaccordion1

Subaccordion2 コンテンツについて、

メインアコーディオン

Subaccordion1 内容私はsubaccordions 1と2 Iの両方を含むように、メインアコーディオンをしたいと思いますメインアコーディオンに第2のアコーディオンを追加するか、またはメインアコーディオンに第2のアコーディオンを含まないか、またはサブアコーディオン2をサブアコーディオン1よりも1段下にインデントさせる私はこれまでにコードを移動するさまざまな方法を試しました。

<!doctype html> 
 
<html class="no-js" lang="en"> 
 
\t 
 
<head> 
 
\t <meta charset='UTF-8'> 
 
\t 
 
\t <title>Notes</title> 
 
\t 
 
\t <!--[if IE]> 
 
    <style type="text/css"> 
 
     .box { display: block; } 
 
     #box { overflow: hidden;position: relative; } 
 
     b { position: absolute; top: 0px; right: 0px; width:1px; height: 251px; overflow: hidden; text-indent: -9999px; } 
 
    </style> 
 
    <![endif]--> 
 

 
</head> 
 
\t 
 
<body> 
 
\t <!-- Styles for collapsible list --> 
 
\t <style> 
 
\t \t .collapsibleList li > input + * { 
 
\t \t display: none; 
 
\t \t } 
 

 
\t \t .collapsibleList li > input:checked + * { 
 
\t \t display: block; 
 
\t \t } 
 

 
\t \t .collapsibleList li > input { 
 
\t \t display: none; 
 
\t \t } 
 

 
\t \t .collapsibleList label { 
 
\t \t cursor: pointer; 
 
\t \t } 
 
\t </style> 
 
\t <!-- Styles for collapsible list --> 
 
    
 
<!-- Content start here --> 
 
    <!-- Main Accordion start --> 
 
    <ul class="collapsibleList"> 
 
    <li> 
 
    <label for="mylist-node1"><font color="#2c84fc"><u>Main Accordion</u></font></label> 
 
    <input type="checkbox" id="mylist-node1" /> 
 
     
 
     
 
     <!-- subaccordions start --> 
 
      <!-- Subaccordion1 start --> 
 
      <ul class="collapsibleList"> 
 
      <li> 
 
      <label for="mylist-node2"><font color="#2c84fc"><u>Subaccordion1</u></font></label> 
 
      <input type="checkbox" id="mylist-node2" /> 
 
       <ul> 
 
       <li>Subaccordion 1 content 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <!-- subaccordion1 end --> 
 
      
 
      <!-- Subaccordion2 start --> 
 
      <ul class="collapsibleList"> 
 
      <li> 
 
      <label for="mylist-node3"><font color="#2c84fc"><u>Subaccordion2</u></font></label> 
 
      <input type="checkbox" id="mylist-node3" /> 
 
       <ul> 
 
       <li>Subaccordion 2 content 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <!-- subaccordion2 end --> 
 
     
 
     <!-- sub accordions end --> 
 
     
 
     
 
    </li> 
 
    </ul> 
 
    <!-- Main Accordion end --> 
 
<!-- Content end here --> 
 

 
</body> 
 

 
</html>

出典

2016-09-11 Animatoring

あなたはAdjacent selectorsを使用しています。これは、直接の兄弟だけを選択します。

input + * 
input:checked + *

General sibling selectorに変更できます。それは同じレベルのすべての兄弟を選択する必要があります。

input ~ * 
input:checked ~ *

出典

2016-09-11 02:54:47 AA2992

純粋なCSS：無制限のネスティングアコーディオン？

答えて

関連する問題