[分享]css3展开收缩按钮样式

CSS3展开收缩按钮样式是一个十分实用的功能，用于让用户更加方便地查看和隐藏需要的信息，操作简便，非常适合用于网站中展示大量的内容。以下为CSS3展开收缩按钮样式的使用方法。 .accordion {...

CSS3展开收缩按钮样式是一个十分实用的功能，用于让用户更加方便地查看和隐藏需要的信息，操作简便，非常适合用于网站中展示大量的内容。以下为CSS3展开收缩按钮样式的使用方法。

 .accordion {
        width: 100%;
        border: 1px solid #ccc;
        margin: 10px 0;
        overflow: hidden;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .1);
    }
    .accordion__trigger {
        display: block;
        padding: 15px;
        color: #333;
        font-size: 18px;
        cursor: pointer;
        border-bottom: 1px solid #ccc;
        background-color: #f6f6f6;
    }
    .accordion__trigger:hover {
        background-color: #e6e6e6;
    }
    .accordion__content {
        padding: 15px;
        display: none;
    }
    .accordion.active .accordion__content {
        display: block;
    } 

以上的代码中，accordion是展开收缩按钮的主体，主要包含三个部分：trigger、content和active。其中，trigger为触发器部分，这里我们设置了字体大小、颜色和悬浮状态；content为内容区域部分，这里我们设置了padding和display:none，用来控制默认收缩状态；active是表示展开状态的标识，当active存在于accordion上时，就意味着当前内容处于展开状态。

使用方法非常简单，我们只需要在HTML中加入如下代码：

 <div class="accordion">
        <div class="accordion__trigger">Title</div>
        <div class="accordion__content">Content</div>
    </div> 

其中Title表示展开收缩按钮的标题，Content表示展开内容。至此，我们就完成了一个展开收缩按钮的样式。