순수 CSS : 무제한 중첩 아코디언?

순수한 CSS 및 html 무제한 중첩 아코디언을 만드는 방법이 있습니까? 아래에 기초가 있지만 아코디언 안에 아코디언을 중첩 시키려고하면 작동하지 않는 것 같습니다. subaccordion2 순수 CSS : 무제한 중첩 아코디언?

에 대한 subaccordion1

Subaccordion2 내용에 대한 예를 들어,

홈페이지 아코디언

Subaccordion1 내용 둘 다 subaccordions 1과 2를 포함하는 주요 아코디언을하고자 할 때 I 메인 아코디언에 두 번째 아코디언을 추가했습니다. 메인 아코디언에 두 번째 아코디언이 포함되지 않았거나 아카데미언 2가 서브 아카디아 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 : 무제한 중첩 아코디언?

답변

관련 문제