Question

有没有办法创建纯CSS和html无限嵌套手风琴？我在下面作为基础但是当我尝试在手风琴中嵌入手风琴时它似乎不起作用。例如，

主要手风琴

Subaccordion1 subaccordion1的内容
Subaccordion2 subaccordion2的内容

我希望主手风琴包含子手风琴1和2.当我向主手风琴添加第二个手风琴时，主手风琴将不包含第二个手风琴或subaccordion2在我尝试时会比subaccordion1缩进一级到目前为止移动代码的不同方法。

<!doctype html>
<html class="no-js" lang="en">
	
<head>
	<meta charset='UTF-8'>
	
	<title>Notes</title>
	
	 <!--[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>
	
<body>
	<!-- Styles for collapsible list -->
	<style>
		.collapsibleList li > input + * {
		 display: none;
		}

		.collapsibleList li > input:checked + * {
		 display: block;
		}

		.collapsibleList li > input {
		 display: none;
		}

		.collapsibleList label {
		 cursor: pointer;
		}
	</style>
	<!-- 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>

Answer 1

您正在使用Adjacent selectors。这只选择了直接兄弟。

input + *
input:checked + *

您可以将其更改为General sibling selector。那应该选择同一级别的所有兄弟姐妹。

input ~ *
input:checked ~ *

纯CSS：无限嵌套手风琴？

1 个答案: