可折叠文件夹 [英] Collapsible Folder
本文介绍了可折叠文件夹的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题:我能够使用CSS创建可折叠的文件夹.
Problem: I was able to create a collapsible folder with the css.
但是，如果转到第二页，则无法确定如何下推该文件夹.当前，CSS的工作方式，如果在其下面的文件夹下面有一个文件夹，它将重叠.我希望能够将另一个文件夹下面的文件夹下推.
However, I am not able to determine how to push down the folder if it goes to the second page. Currently, how the CSS is working, it will overlap if there is a folder below the folder that is beneath it. I would like to be able to push the folder below another folder down.
我提供了我所谈论的图像:
I have provided an image on what I am talking about:
#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>
推荐答案
如果我真的只想使用CSS，这就是我要做的.我在CSS中加入了注释，以解释我在做什么.
Here's how I would do it if I really only wanted to use CSS. I've included comments in the CSS to explain what I'm doing.
* {
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;"> 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;"> 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;"> 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;"> Folder Title</li>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
基本上，使用overflow: hidden;和固定的height值隐藏其他<li>项目，并使用:hover状态显示它们.高度的变化也会将其他文件夹向下推.
Basically, use overflow: hidden; and a fixed height value to hide the rest of the <li> items, and use a :hover state to reveal them. The change in height will push the other folders down as well.
这篇关于可折叠文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
