制作可折叠列表需要使用CSS中的伪类选择器和属性选择器。其中,关键词包括::hover、display、none、+、-。
首先,在HTML中创建一个无序列表(<ul>),并为每个列表项(<li>)添加一个标题(<div>)和内容(<p>)。然后,使用CSS中的属性选择器选择所有标题(div[class="title"])并设置鼠标悬停时的样式(:hover)。
接下来,使用CSS中的伪类选择器(:not)和属性选择器选择除第一个标题外的所有标题(div[class="title"]:not(:first-child)),并将其内容的显示属性设置为“none”(display: none;)。这样,只有第一个标题的内容会显示出来。
最后,在每个标题前添加一个“+”号(content: "+";),并使用CSS中的伪类选择器(:hover)将其更改为“-”号(content: "-";)。
示例代码如下:
<ul>
<li>
<div class="title">Title 1</div>
<p>Content 1</p>
</li>
<li>
<div class="title">Title 2</div>
<p>Content 2</p>
</li>
<li>
<div class="title">Title 3</div>
<p>Content 3</p>
</li>
</ul>
div[class="title"]:hover {
cursor: pointer;
}
div[class="title"]:not(:first-child) + p {
display: none;
}
div[class="title"]::before {
content: "+";
display: inline-block;
margin-right: 5px;
}
div[class="title"]:hover::before {
content: "-";
}