css点击dt隐藏dd |css3 展开效果

dt {
cursor: pointer;
}
dd {
display: none;
}
dt.active + dd {
display: block;
}

上面的代码中，大家设置dt标签的鼠标样式为手型，设置dd标签的初始状态为不可见，然后在dt标签被点击时，添加一个active类名，并选择对应的dd标签来显示。

<dl>
<dt onclick="this.classList.toggle('active')">标题1</dt>
<dd>内容1</dd>
<dt onclick="this.classList.toggle('active')">标题2</dt>
<dd>内容2</dd>
<dt onclick="this.classList.toggle('active')">标题3</dt>
<dd>内容3</dd>
</dl>

在HTML中，大家将需要点击展开/隐藏的dt标签添加一个onclick事件，当点击时，JS会为其添加/删除active类名。CSS选择active类名的另外一个好处是，大家可以通过设置active类名来控制展开/隐藏的动画效果。