Javascript 单击即可展开和收缩的垂直div

我的目标是在父div中有五个左右的div。单击一个div时，它应该扩展到其他div。使我困惑的是，如何使所述div在其他div之上展开，以便在单击reset/back/close按钮时再次显示所有div

悬停时，div应略微展开

父容器是1900 x 500

我的代码：

.one{
身高：100%；
宽度：20%；
背景色：#ffccaa；
浮动：左；
}
.二{
身高：100%；
宽度：20%；
背景色：#ffffcc；
浮动：左；
}
.三{
身高：100%；
宽度：20%；
背景色：#aabbcc；
浮动：左；
}
.4{
身高：100%；
宽度：20%；
背景色：#中交；
浮动：左；
}
.5{
身高：100%；
宽度：20%；
背景色：#ff11bb；
浮动：左；
}
*{边距：0；填充：0；}
.标题{高度：50vh；宽度：100vw；背景色：#000；}
.navi{高度：100px；宽度：100%；背景色：fccaab；页边顶部：5px；}
.logo{高度：100%；宽度：500px；背景色：#ccc；对齐：中心；边距：自动；}
.content{高度：自动；宽度：100%；背景色：#ccffca；页边顶部：5px；}
.footer{高度：10vh；宽度：100%；背景色：abcdef；页边顶部：5px；}

---

在本例中，单击的div被赋予100%的宽度，其同级的宽度被删除。动画将提供平滑的动画

使用div上的

：hover

伪类创建悬停。在本例中，使用如下方法略微缩放div：

body > div:hover {
  transform: scale(1.05);  
  cursor: pointer;
}

当使用

选择时，缩放将被删除。选择：悬停{transform:scale（1）}

工作示例 注意：我已将所有ID更改为类，并将所有重复样式压缩为

body>div

；body的所有直接div子项都具有相同的宽度、高度、过渡，并向左浮动

$（'body>div'）。在（'click'，function（）上{
$（this）.toggleClass（'selected'）.sides（）.toggleClass（'hide'）；
});
html，
身体{
身高：100%；
保证金：0；
溢出：隐藏；
}
正文>div{
过渡：均为0.3秒；
浮动：左；
身高：100%；
宽度：20%；
}
body>div：悬停{
转换：标度（1.05）；
光标：指针；
}
.一{
背景色：#ffccaa；
}
.二{
背景色：#ffffcc；
}
.三{
背景色：#aabbcc；
}
.4{
背景色：#中交；
}
.5{
背景色：#ff11bb；
}
.选定{
宽度：100%；
}
.选定：悬停{
变换：比例（1）；
}
.隐藏{
宽度：0；
}

欢迎来到S.O.请阅读：您可以发布一些代码或尝试吗？完成。谢谢你，先生。我不知道jquery。今晚开始在网上学校学习。我很明白。也许是因为我有javascript。我的网站只需要这一部分，我就快完成了。“这并不难，对吧”，“这很简单，可以添加，对吧？”如果你自己知道这很容易，请自己做一些努力。当你被某些特定的事情困住时，就去问。你问了很多问题，这意味着你没有做出任何努力。我所说的简单是在每个div中添加背景图像。如果我认为整个任务很简单，我会自己完成。那是侮辱，TJ$（'body>div'）对我不起作用。它将进入一个现有的网站。我将尝试找到一种新的方法来解决这个问题。
body>div
可能会变成
.container.box
。将div放在一个父类中，比如
container
，并将div放在一个类中，每个内部div都使用相同的类。谢谢。！我非常感激。！你好，又来了。我试了很多次让它工作。我已经更新了帖子，向你展示了我所有的网站代码。我觉得自己在这里很傻。当我有时间的时候，我一直在试着自己得到它。这对我不起作用。嗨，把你现在所有的东西都复制粘贴到一个jsbin中，然后把链接作为评论发布在这里。使用此链接开始：。