Javascript 单击时显示/隐藏多个弹出窗口

我已经创建了一个钢笔显示/隐藏多个弹出窗口：

正如您所看到的，这里我们有三个章节，分别是关于

2016

、

2017

和

2018

。目标是当用户点击它们时，不同的窗口将显示不同的信息

我的实现在

2016

中运行良好。在这种情况下，将打开一个弹出窗口，显示

零件01

。然而，对于2017年，我实现了相同的逻辑，但没有显示第02部分

有人能准确地告诉我2017年发生了什么问题吗

var toggle=document.getElementById（'toggle_Y1'）；
var slider=document.querySelector（'.slider_Y1'）；
var toggle1=document.getElementById（'toggley11'）；
toggle.addEventListener（'click'，toggleSlider，false）；
toggle1.addEventListener（'click'，toggleSlider，false）；
函数toggleSlider（）{
if（slider.classList.contains（'opened_Y1'））{
slider.classList.remove（'opened_Y1'）；
slider.classList.add（'closed_Y1'）；
}否则{
slider.classList.remove（'closed_Y1'）；
slider.classList.add（'opened_Y1'）；
}
}
var toggle_2=document.getElementById（'toggle_Y2'）；
var slider_2=document.querySelector（'.slider_Y2'）；
var toggle1_2=document.getElementById（'toggle_Y21'）；
toggle_2.addEventListener（'click'，toggleSlider_2，false）；
toggle1_2.addEventListener（'click'，toggleSlider_2，false）；
函数切换滑块_2（）{
if（滑块2.classList.contains（'opened_Y2'））{
滑块2.classList.remove（'opened_Y2'）；
滑块2.classList.add（'closed_Y2'）；
}否则{
滑块2.classList.remove（'closed_Y2'）；
滑块2.classList.add（'opened_Y2'）；
}
}

.content\u EQ\u布告{
保证金：0自动；
填充：10px 0 10px 0；
宽度：33.2%；
高度：300px；
显示：内联块；
浮动：左；
右边框：1px实心#e5；
背景：rgba（0,0,0,0）；
文本对齐：居中；
光标：指针；
}
.Y1{
右边框：0px实心#e5；
}
.EQ_公告_Y1{
溢出：隐藏；
位置：绝对位置；
身高：292px；
宽度：100%；
背景：rgba（0,0,0,0）；
利润上限：4倍；
}
.1，
.Y2{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0）；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
填充：0px；
边框：1px实心#中交；
z指数：200；
-webkit转换：-webkit转换。3s轻松；
-moz转换：-moz转换。3s易用性；
-ms转换：-ms转换。3s轻松；
转变：转变。3s轻松；
}
.滑块_Y1.打开_Y1，
.滑块_Y2.打开_Y2{
-webkit转换：翻译（0,0%）；
-moz变换：平移（0,0%）；
-ms变换：翻译（0,0%）；
转换：翻译（0,0%）；
背景：#fff；
}
.滑块_Y1.关闭_Y1，
.滑块_Y2.闭合_Y2{
-webkit转换：翻译（0,100%）；
-moz变换：平移（0，100%）；
-ms变换：翻译（0，100%）；
转换：翻译（0,100%）；
}
#切换_Y11，
#切换Y21{
保证金：0；
填充：0；
背景：rgba（0,0,0,0）；
宽度：100%；
身高：100%；
文本对齐：左对齐；
位置：绝对位置；
}

2016
2017
2018
第01部
第02部

转换

.slider\u Y2.打开\u Y2

至

-100%

var toggle=document.getElementById（'toggle_Y1'）；
var slider=document.querySelector（'.slider_Y1'）；
var toggle1=document.getElementById（'toggley11'）；
toggle.addEventListener（'click'，toggleSlider，false）；
toggle1.addEventListener（'click'，toggleSlider，false）；
函数toggleSlider（）{
if（slider.classList.contains（'opened_Y1'））{
slider.classList.remove（'opened_Y1'）；
slider.classList.add（'closed_Y1'）；
}否则{
slider.classList.remove（'closed_Y1'）；
slider.classList.add（'opened_Y1'）；
}
}
var toggle_2=document.getElementById（'toggle_Y2'）；
var slider_2=document.querySelector（'.slider_Y2'）；
var toggle1_2=document.getElementById（'toggle_Y21'）；
toggle_2.addEventListener（'click'，toggleSlider_2，false）；
toggle1_2.addEventListener（'click'，toggleSlider_2，false）；
函数切换滑块_2（）{
if（滑块2.classList.contains（'opened_Y2'））{
滑块2.classList.remove（'opened_Y2'）；
滑块2.classList.add（'closed_Y2'）；
}否则{
滑块2.classList.remove（'closed_Y2'）；
滑块2.classList.add（'opened_Y2'）；
}
}

.content\u EQ\u布告{
保证金：0自动；
填充：10px 0 10px 0；
宽度：33.2%；
高度：300px；
显示：内联块；
浮动：左；
右边框：1px实心#e5；
背景：rgba（0,0,0,0）；
文本对齐：居中；
光标：指针；
}
.Y1{
右边框：0px实心#e5；
}
.EQ_公告_Y1{
溢出：隐藏；
位置：绝对位置；
身高：292px；
宽度：100%；
背景：rgba（0,0,0,0）；
利润上限：4倍；
}
.1，
.Y2{
身高：100%；
宽度：100%；
背景：rgba（0,0,0,0）；
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
填充：0px；
边框：1px实心#中交；
z指数：200；
-webkit转换：-webkit转换。3s轻松；
-moz转换：-moz转换。3s易用性；
-ms转换：-ms转换。3s轻松；
转变：转变。3s轻松；
}
.滑块_Y1.打开_Y1{
-webkit转换：翻译（0,0%）；
-moz变换：平移（0,0%）；
-ms变换：翻译（0,0%）；
转换：翻译（0,0%）；
背景：#fff；
}
.滑块_Y1.关闭_Y1，
.滑块_Y2.闭合_Y2{
-webkit转换：翻译（0,100%）；
-moz变换：平移（0，100%）；
-ms变换：翻译（0，100%）；
转换：翻译（0,100%）；
}
.滑块_Y2.打开_Y2{
背景：白色；
-webkit转换：翻译（0，-100%）；
-moz变换：平移（0，-100%）；
-ms变换：平移（0，-100%）；
转换：转换（0，-100%）；
}
#切换_Y11，
#切换Y21{
保证金：0；
填充：0；
背景：
.slider_Y1 height = 100%  ===> distance from top = 100%
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height  === > distance from top = 200%


.slider_Y2.opened_Y2 {
    -webkit-transform: translate(0, -100%);
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    transform: translate(0, -100%);
    background: #fff;
}