动态百叶窗-CSDN博客

本文链接：https://blog.csdn.net/shijinhao233/article/details/122394692

要求：点击任意一个标题如果该元素是展开的那么就关上反之则展开其他的都要关上

一，基本框架

主要由四层构成

包含标题和与内容的
标题为一层
内容为一层
内容里的小标题与文本内容

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百叶窗</title>
    <link rel="stylesheet" href="./shuTter.css">
    <script src="./shuTter.js"></script>
</head>
<body>
    <div class="total">
        <!-- 第一块 -->
        <div class="roqi">
            <div class="title" >标题1</div>
            <div class="neiron">
                <div class="smalltitle">小标题1</div>
                <div class="wenben">
                    文本内容文本内容文本内容
                    文本内容文本内容文本内容
                </div>
            </div>
        </div>
        <!-- 第二块 -->
        <div class="roqi">
            <div class="title">标题2</div>
            <div class="neiron">
                <div class="smalltitle">小标题2</div>
                <div class="wenben">
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容文本内容文本内容文本内容
                    文本内容
                    文本内容文本内容文本内容文本内容
                    
                </div>
            </div>
        </div>
        <!-- 第三块 -->
        <div class="roqi">
            <div class="title">标题三</div>
            <div class="neiron">
                <div class="smalltitle">小标题三</div>
                <div class="wenben">文本内容</div>
            </div>
        </div>
    </div>
</body>
</html>

二，样式

.total .roqi {
  margin: 0 auto;
  width: 300px;
  height: 100%;
  border: 1px solid #1a0606;
}
.total .roqi .title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  width: 300px;
  background-color: rgba(166, 195, 212, 0.938);
}
.total .roqi .neiron {
  display: none;
  background-color: #8a42b9;
}
.total .roqi .neiron .smalltitle {
  color: #0ff81a;
  text-align: center;
}
.total .roqi .neiron .wenben {
  text-align: center;
  color: #deeaf0;
}

三，JS文件

window.onload = function() { 
    let neironDoms = document.getElementsByClassName('neiron')
    neironDoms[0].setAttribute('style', 'display:block;')
    let titleDoms = document.getElementsByClassName('title')
    Array.from(titleDoms).forEach((item, index) => {
        item.onclick = function() {
            Array.from(neironDoms).forEach((neiron, neironIndex) => {
                if (neironIndex === index) {  
                    let is_zhankai = neironDoms[neironIndex].getAttribute('style') === 'display:block;'
                    neironDoms[neironIndex].setAttribute('style', is_zhankai ? 'display:none;' : 'display:block;')
                } else { 
                    neironDoms[neironIndex].setAttribute('style', 'display:none;')
                }
            })
        }
    })
}