Javascript 如何切换div以将其展开和收缩回原始大小？

因此，html中有5个div面板。当其中一个被单击时，它应该扩展到完整大小，再次单击时收缩。我的javascript代码只允许出于某种原因对其进行收缩

这是html代码：

  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>    
</body>

这是我的Javascript代码：

    const panel = document.querySelectorAll(".panels div");
    for (let p of panel){
        p.addEventListener('click', function(){
            p.classList.toggle('panels');
        })
    }
});

我不知道怎么了，也许我换错了班？

---

如果我想切换css类（.panels>*）该怎么办？（p.classList.toggle（'panels*）？我试过了，但不起作用，请帮助，谢谢！

这里你应该提到toggle（'panel'），不带“s”

document.addEventListener（'DOMContentLoaded'，（）=>{
const panel=document.queryselectoral（“.panels div”）；
用于（让p为面板）{
p、 addEventListener（'单击'，函数（））{
p、 切换（'panel'）；
})
}
})；

html{
框大小：边框框；
背景：#ffc600；
字体系列：'opensans'；
字体大小：14px；
字体大小：400；
}
身体{
保证金：0；
}
*，*：之前，*：之后{
框大小：继承；
}
.小组{
最小高度：100vh；
溢出：隐藏；
显示器：flex；
}
.小组{
背景：#6B0F9C；
盒影：插入0.5pxRGBA（255255,0.1）；
颜色：白色；
文本对齐：居中；
对齐项目：居中；
/*Safari transitionend event.propertyName===flex*/
/*Chrome+FF transitionend event.propertyName===flex grow*/
过渡：字体大小0.7s立方贝塞尔（0.61，-0.19,0.7，-0.11），flex 0.7s立方贝塞尔（0.61，-0.19,0.7，-0.11），背景0.2s；
字体大小：20px；
背景尺寸：封面；
背景位置：中心；
弹性：1；
证明内容：中心；
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
}
.专题小组1{
背景图片：url(https://source.unsplash.com/8y8DbWwDTz4/1500x1500);
}
.专题小组2{
背景图片：url(https://source.unsplash.com/ZQsKyddXezA/1500x1500);
}
.专题小组3{
背景图片：url(https://source.unsplash.com/cbHtEWXkIdQ/1500x1500);
}
.专题小组4{
背景图片：url(https://source.unsplash.com/FwiNLpZdKVk/1500x1500);
}
.专题小组5{
背景图片：url(https://source.unsplash.com/w8TtcStjyWY/1500x1500);
}
.面板>*{
保证金：0；
宽度：100%；
转变：转变0.5s；
弹性：10自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.panel>*：第一个孩子{
转换：translateY（-100%）；
}
.panel.open-active>*：第一个孩子{
变换：translateY（0）；
}
.panel>*：最后一个孩子{
转化：translateY（100%）；
}
.panel.open-active>*：最后一个子项{
变换：translateY（0）；
}
.p.小组{
文本转换：大写；
字体系列：“开放式Sans”，草书；
文本阴影：04pxRGBA（0,0,0,0.72），014pxRGBA（0,0,0,0.45）；
字号：1em；
}
.p组：第n个孩子（2）{
字号：3em；
}
.panel.open{
字体大小：40px；
弹性：5；
}

哎

让我们

跳舞

给予

接受

接收

经历

它

今天

给予

全部

你可以

生活

在

动议

面板

是包装

div

上的类。我想您应该切换

打开

类（也可能是

打开活动

，以获得额外的文本

小提琴：

    const panel = document.querySelectorAll(".panels div");
    for (let p of panel){
        p.addEventListener('click', function(){
            p.classList.toggle('panels');
        })
    }
});