[分享]css3折叠与展开内容

CSS3折叠与展开内容功能是CSS3在网页制作中比较实用的功能之一，特别是在制作FAQ、目录、菜单等功能时非常方便。下面我们就来简单介绍一下该功能的实现。/ HTML / 标题1 内容1 标题...

CSS3折叠与展开内容功能是CSS3在网页制作中比较实用的功能之一，特别是在制作FAQ、目录、菜单等功能时非常方便。下面我们就来简单介绍一下该功能的实现。

/* HTML */
<div class="accordion">
    <div class="item">
        <h3 class="title">标题1</h3>
        <div class="content">内容1</div>
    </div>
    <div class="item">
        <h3 class="title">标题2</h3>
        <div class="content">内容2</div>
    </div>
    <div class="item">
        <h3 class="title">标题3</h3>
        <div class="content">内容3</div>
    </div>
</div>

/* CSS */
.accordion .title {
    cursor: pointer;
}

.accordion .content {
    display: none;
}

.accordion .item.active .content {
    display: block;
} 

上面的HTML代码中，我们使用了<div>元素嵌套了标题和内容，其中标题用<h3>元素，内容用<div>元素，然后在父级元素<div class="accordion">下嵌套了多个折叠的项，每个项分别包括标题和内容。CSS代码中给标题设置了鼠标指针为光标样式，内容设置了初始的不可见状态，然后通过.active类来控制展开后的可见状态。

我们还可以进一步加入JavaScript代码来实现交互效果：

/* JavaScript */
var items = document.querySelectorAll('.accordion .item');

for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        this.classList.toggle('active');
    });
} 

上述JavaScript代码为我们的折叠展开功能添加了点击事件，点击时切换当前项的.active类，从而实现展开和关闭的效果。

通过上述的HTML、CSS和JavaScript代码，我们就可以轻松实现CSS3折叠与展开内容功能。需要注意的是，该功能还需要多种浏览器的兼容性测试和调整，以保证在各种设备和浏览器上都能正常显示。