css展开列表 |图片铺满手机屏幕css

/* 定义基本样式 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 12px;
background-color: #f1f1f1;
border: 1px solid #ccc;
cursor: pointer;
}
/* 鼠标移动到列表项上面时改变背景颜色 */
li:hover {
background-color: #e2e2e2;
}
/* 定义展开或闭合状态的样式 */
li.hasChildren:before {
content: '+';
display: inline-block;
margin-right: 6px;
font-weight: bold;
}
li.open:before {
content: '-';
}
/* 定义子列表的样式 */
ul.sublist {
display: none;
margin-left: 18px;
}
/* 当鼠标点击列表项时切换展开或闭合状态 */
li.hasChildren.open ul.sublist {
display: block;
}

以上代码定义了列表项的基本样式和展开或闭合状态的样式。使用:before伪类在列表项前加上+或-符号，表示列表项是否展开。每个含有子列表的列表项则添加class为hasChildren，每个展开的子列表项则添加class为open。

另外，代码中使用了display:none将子列表隐藏，当点击含有子列表的列表项时，将其对应的子列表设为display:block来显示子列表。

总之，使用这些简单的CSS代码就能轻松实现一个展开列表，为用户提供更好的浏览体验。