[分享]css3手风琴div

CSS3手风琴div是CSS3的一个新特性，它可以把一个div元素分成多个部分，可以让每一个部分分别展开或折叠。这种效果非常常见，比如网站的导航栏、侧边栏或页面的某一部分。 / CSS代码 / .ac...

CSS3手风琴div是CSS3的一个新特性，它可以把一个div元素分成多个部分，可以让每一个部分分别展开或折叠。这种效果非常常见，比如网站的导航栏、侧边栏或页面的某一部分。

 /* CSS代码 */
    .accordion {
        width: 100%;
        overflow: hidden;
    }
    .accordion .panel {
        width: 100%;
        display: none;
        overflow: hidden;
        padding: 10px;
    }
    .accordion .panel.active {
        display: block;
    } 

以上是CSS3手风琴div的基本类名和样式设置，其中类名accordion表示手风琴整体容器，类名panel表示手风琴每个折叠的面板。

在HTML中，需要有一个触发器来触发手风琴展开，通常情况下使用一个按钮或链接。下面是一个基本的HTML代码：

 <div class="accordion">
        <div class="panel active">
            <h2>面板1</h2>
            <p>这是面板1的内容</p>
        </div>
        <div class="panel">
            <h2>面板2</h2>
            <p>这是面板2的内容</p>
        </div>
        <div class="panel">
            <h2>面板3</h2>
            <p>这是面板3的内容</p>
        </div>
    </div> 

以上代码中，每个面板包含一个标题和内容，其中面板1默认展开，其他面板默认折叠。我们可以通过Javascript来实现点击触发展开或折叠，也可以使用纯CSS实现。

总之，CSS3手风琴div是一个非常实用的特性，可以大幅提升网站用户体验，值得我们去学习和使用。