移动端树形菜单
时间: 2023-07-08 11:06:59 浏览: 78
移动端树形菜单通常采用折叠展开的方式,可以通过点击或者滑动手势来进行操作。以下是一个简单的示例代码,你可以根据自己的需求进行修改和优化。
HTML:
```
<div class="tree-menu">
<ul>
<li>
<span class="folder">Folder 1</span>
<ul>
<li><a href="#">Subitem 1.1</a></li>
<li><a href="#">Subitem 1.2</a></li>
</ul>
</li>
<li>
<span class="folder">Folder 2</span>
<ul>
<li>
<span class="folder">Subfolder 2.1</span>
<ul>
<li><a href="#">Subitem 2.1.1</a></li>
<li><a href="#">Subitem 2.1.2</a></li>
</ul>
</li>
<li><a href="#">Subitem 2.2</a></li>
</ul>
</li>
</ul>
</div>
```
CSS:
```
.tree-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.tree-menu li {
margin: 0;
padding: 0 0 0 1em;
line-height: 2em;
color: #333;
position: relative;
}
.tree-menu li:before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-left: 1px solid #ccc;
}
.tree-menu li:last-child:before {
border-left: none;
}
.tree-menu .folder {
cursor: pointer;
}
.tree-menu ul ul {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
.tree-menu .open > ul {
display: block;
}
```
JS:
```
$('.tree-menu').on('click', '.folder', function() {
$(this).parent().toggleClass('open');
});
```
在这个示例中,我们使用了无序列表和 CSS 来创建树形结构,并使用 jQuery 来实现折叠展开功能。当用户点击文件夹时,我们会给其父元素添加一个 `open` 类,然后通过 CSS 显示或隐藏子菜单。
当然,这只是一个简单的示例代码,你可以根据自己的需求进行修改和优化,例如添加动画效果、支持多级菜单等。