可折叠文件夹

Question

问题：我能够使用css创建一个可折叠的文件夹。

但是，如果文件夹转到第二页，我无法确定如何按下该文件夹。目前，CSS如何工作，如果文件夹下面有一个文件夹，它将重叠。我希望能够将文件夹推到另一个文件夹下面。

我提供了一张我正在谈论的图像：

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

<nav id="primary_nav_wrap">
				<ul>
				  <li style="margin-left:20px">
				  <a href="#">Controlled Substance Materials</a>
					<ul>
					  <li><a href="#">Sub Menu 1</a></li>
					  <li><a href="#">Sub Menu 2</a></li>
					  <li><a href="#">Sub Menu 3</a></li>
					  <li><a href="#">Sub Menu 4</a>
						<ul>
						  <li><a href="#">Deep Menu 1</a>
							<ul>
							  <li><a href="#">Sub Deep 1</a></li>
							  <li><a href="#">Sub Deep 2</a></li>
							  <li><a href="#">Sub Deep 3</a></li>
								<li><a href="#">Sub Deep 4</a></li>
							</ul>
						  </li>
						  <li><a href="#">Deep Menu 2</a></li>
						</ul>
					  </li>
					  <li><a href="#">Sub Menu 5</a></li>
					</ul>
				  </li>
				 </ul>
			</nav>
			<nav id="primary_nav_wrap">
				<ul>
				  <li style="margin-left:20px">
				  <a href="#">Controlled Substance Materials</a>
					<ul>
					  <li><a href="#">Sub Menu 1</a></li>
					  <li><a href="#">Sub Menu 2</a></li>
					  <li><a href="#">Sub Menu 3</a></li>
					  <li><a href="#">Sub Menu 4</a>
						<ul>
						  <li><a href="#">Deep Menu 1</a>
							<ul>
							  <li><a href="#">Sub Deep 1</a></li>
							  <li><a href="#">Sub Deep 2</a></li>
							  <li><a href="#">Sub Deep 3</a></li>
								<li><a href="#">Sub Deep 4</a></li>
							</ul>
						  </li>
						  <li><a href="#">Deep Menu 2</a></li>
						</ul>
					  </li>
					  <li><a href="#">Sub Menu 5</a></li>
					</ul>
				  </li>
				 </ul>
			</nav>			
			<nav id="primary_nav_wrap">
				<ul>
				  <li style="margin-left:20px">
				  <a href="#">Controlled Substance Materials</a>
					<ul>
					  <li><a href="#">Sub Menu 1</a></li>
					  <li><a href="#">Sub Menu 2</a></li>
					  <li><a href="#">Sub Menu 3</a></li>
					  <li><a href="#">Sub Menu 4</a>
						<ul>
						  <li><a href="#">Deep Menu 1</a>
							<ul>
							  <li><a href="#">Sub Deep 1</a></li>
							  <li><a href="#">Sub Deep 2</a></li>
							  <li><a href="#">Sub Deep 3</a></li>
								<li><a href="#">Sub Deep 4</a></li>
							</ul>
						  </li>
						  <li><a href="#">Deep Menu 2</a></li>
						</ul>
					  </li>
					  <li><a href="#">Sub Menu 5</a></li>
					</ul>
				  </li>
				 </ul>
			</nav>
            			<nav id="primary_nav_wrap">
				<ul>
				  <li style="margin-left:20px">
				  <a href="#">Controlled Substance Materials</a>
					<ul>
					  <li><a href="#">Sub Menu 1</a></li>
					  <li><a href="#">Sub Menu 2</a></li>
					  <li><a href="#">Sub Menu 3</a></li>
					  <li><a href="#">Sub Menu 4</a>
						<ul>
						  <li><a href="#">Deep Menu 1</a>
							<ul>
							  <li><a href="#">Sub Deep 1</a></li>
							  <li><a href="#">Sub Deep 2</a></li>
							  <li><a href="#">Sub Deep 3</a></li>
								<li><a href="#">Sub Deep 4</a></li>
							</ul>
						  </li>
						  <li><a href="#">Deep Menu 2</a></li>
						</ul>
					  </li>
					  <li><a href="#">Sub Menu 5</a></li>
					</ul>
				  </li>
				 </ul>
			</nav>

Answer 1

如果我真的只想使用CSS，我会怎么做。我在CSS中添加了注释来解释我在做什么。

* {
  font-family: sans-serif;
}

.collapsible {
  list-style-type: none;
  height: 24px; /* Fixed value for height */
  overflow: hidden; /* hides the Sub-items */
  background: rgba(0, 0, 0, 0.1);
  padding: 6px;
  width: 160px;
}
.collapsible:hover {
  cursor: pointer !important; /* For easier user interaction */
  height: auto; /* On hover, the full menu is revealed */
}
.collapsible li {
  font-size: 16px;
  line-height: 26px; /* Line height is just greater than the height of the menu before hover to make sure it's hidden */
}
.collapsible li:first-child {
  padding-bottom: 0.6em;
  }
.collapsible li:not(:first-child) {
  padding-left: 1.2em;
  }
.folder-title {
  font-weight: bold;
}

<ul class="collapsible">
  <li class="folder-title">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTVYiGGwOeG9r4CWQgttlHyby_BMVa_mx7qZW9yFt5nFifCvRtj_Kt40Q" style="height: 16px; vertical-align: middle;">&nbsp;Folder Title</li>
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
  <li>Sub-item 3</li>
</ul>

<ul class="collapsible">
  <li class="folder-title">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTVYiGGwOeG9r4CWQgttlHyby_BMVa_mx7qZW9yFt5nFifCvRtj_Kt40Q" style="height: 16px; vertical-align: middle;">&nbsp;Folder Title</li>
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
  <li>Sub-item 3</li>
</ul>

<ul class="collapsible">
  <li class="folder-title">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTVYiGGwOeG9r4CWQgttlHyby_BMVa_mx7qZW9yFt5nFifCvRtj_Kt40Q" style="height: 16px; vertical-align: middle;">&nbsp;Folder Title</li>
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
  <li>Sub-item 3</li>
</ul>


<ul class="collapsible">
  <li class="folder-title">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTVYiGGwOeG9r4CWQgttlHyby_BMVa_mx7qZW9yFt5nFifCvRtj_Kt40Q" style="height: 16px; vertical-align: middle;">&nbsp;Folder Title</li>
  <li>Sub-item 1</li>
  <li>Sub-item 2</li>
  <li>Sub-item 3</li>
</ul>

基本上，使用overflow: hidden;和固定的height值隐藏剩余的<li>项，并使用:hover状态来显示它们。高度的变化也将推动其他文件夹。