前端手风琴案例代码
时间: 2023-07-23 18:04:26 浏览: 57
以下是一个基本的前端手风琴案例代码,使用 HTML、CSS 和 JavaScript:
HTML:
```html
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">Section 1</div>
<div class="accordion-content">Content for Section 1 goes here.</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 2</div>
<div class="accordion-content">Content for Section 2 goes here.</div>
</div>
<div class="accordion-item">
<div class="accordion-header">Section 3</div>
<div class="accordion-content">Content for Section 3 goes here.</div>
</div>
</div>
```
CSS:
```css
.accordion {
display: flex;
flex-direction: column;
}
.accordion-item {
border: 1px solid #ccc;
}
.accordion-header {
background-color: #f1f1f1;
cursor: pointer;
padding: 10px;
}
.accordion-content {
display: none;
padding: 10px;
}
.accordion-item.active .accordion-content {
display: block;
}
```
JavaScript:
```javascript
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const header = item.querySelector('.accordion-header');
header.addEventListener('click', () => {
item.classList.toggle('active');
});
});
```
这个案例使用了 Flexbox 布局来排列手风琴项,给每个项添加了点击事件,当点击时切换 active 类来控制内容的显示和隐藏。在 CSS 中定义了 active 类的样式来显示所选项的内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)