[分享]css3折叠展开效果

CSS3折叠展开效果是网页设计中经常使用的一种交互效果，可以美化页面结构，提高用户体验。下面将演示如何使用CSS3实现折叠展开效果。 一级标题1 内容1 一级标题2 内容2 其中，acco...

CSS3折叠展开效果是网页设计中经常使用的一种交互效果，可以美化页面结构，提高用户体验。下面将演示如何使用CSS3实现折叠展开效果。

 <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-title">一级标题1</div>
            <div class="accordion-content">内容1</div>
        </div>
        <div class="accordion-item">
            <div class="accordion-title">一级标题2</div>
            <div class="accordion-content">内容2</div>
        </div>
    </div> 

其中，accordion为外部容器，accordion-item为每个折叠展开项，accordion-title为每个项的折叠标题，accordion-content为每个项的折叠内容。CSS样式如下：

 .accordion-item {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
    .accordion-title {
        background-color: #ccc;
        color: #fff;
        padding: 10px;
        cursor: pointer;
    }
    .accordion-content {
        padding: 10px;
        display: none;
    }
    .accordion-item.active .accordion-content {
        display: block;
    } 

以上CSS样式中，accordion-item为每个折叠展开项的样式，包括边框和底部间隔；accordion-title为每个项的折叠标题的样式，包括背景色、文字颜色、内边距和光标样式；accordion-content为每个项的折叠内容的样式，包括内边距和初始状态下的不可见；accordion-item.active .accordion-content为点击展开后折叠内容的可见状态。

最后，为折叠项添加交互效果的JavaScript代码如下：

 var items = document.querySelectorAll('.accordion-item');
    for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var title = item.querySelector('.accordion-title');
        title.addEventListener('click', function() {
            var activeItem = document.querySelector('.accordion-item.active');
            if (activeItem) {
                activeItem.classList.remove('active');
            }
            this.parentNode.classList.toggle('active');
        });
    } 

代码中，首先使用querySelectorAll获取所有折叠项，遍历每个项并获取其标题，为标题添加点击事件监听器，当点击标题时，先移除已经展开的折叠项，最后为当前点击的折叠项添加active样式，实现展开折叠效果。