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

Question

我在显示/隐藏多个弹出窗口时创建了一个笔:https://codepen.io/Volabos/pen/BGdBKw

如您所见，这里我们有 3 个部分，分别是 2016、2017 和 2018。目标是当用户点击它们时，不同的窗口会滑动显示不同的信息。

我的实现在 2016 上运行良好。在这种情况下，将打开一个显示 PART 01 的弹出窗口。然而，对于 2017 年，我实现了同样的逻辑，但未能显示 PART 02。

有人能告诉我 2017 究竟出了什么问题吗？

var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');


toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);


function toggleSlider() {
  if (slider.classList.contains('opened_Y1')) {
    slider.classList.remove('opened_Y1');
    slider.classList.add('closed_Y1');
  } else {
    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);


function toggleSlider_2() {
  if (slider_2.classList.contains('opened_Y2')) {
    slider_2.classList.remove('opened_Y2');
    slider_2.classList.add('closed_Y2');
  } else {
    slider_2.classList.remove('closed_Y2');
    slider_2.classList.add('opened_Y2');

  }
}

.content_EQ_Announcement_Y {
  margin: 0 auto;
  padding: 10px 0 10px 0;
  width: 33.2%;
  height: 300px;
  display: inline-block;
  float: left;
  border-right: 1px solid #e5e5e5;
  background: rgba(0, 0, 0, .0);
  text-align: center;
  cursor: pointer;
}

.Y1 {
  border-right: 0px solid #e5e5e5;
}

.EQ_Announcement_Y1 {
  overflow: hidden;
  position: absolute;
  height: 292px;
  width: 100%;
  background: rgba(0, 0, 0, .0);
  margin-top: 4px;
}

.slider_Y1,
.slider_Y2 {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  border: 1px solid #cccccc;
  z-index: 200;
  -webkit-transition: -webkit-transform .3s ease;
  -moz-transition: -moz-transform .3s ease;
  -ms-transition: -ms-transform .3s ease;
  transition: transform .3s ease;
}

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

.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

#toggle_Y11,
#toggle_Y21 {
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .0);
  width: 100%;
  height: 100%;
  text-align: left;
  position: absolute;
}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>


<div class="EQ_Announcement_Y1">
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y1'>2016</div>
  </div>
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y2'>2017</div>
  </div>
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y3'>2018</div>
  </div>

  <div class="slider_Y1 closed_Y1">
    <div id='toggle_Y11'>
      PART 01
    </div>
  </div>
  <div class="slider_Y2 closed_Y2">
    <div id='toggle_Y21'>
      PART 02
    </div>
  </div>
</div>

Answer 1

将 .slider_Y2.opened_Y2 转换为 -100%

var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');


toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);


function toggleSlider() {
  if (slider.classList.contains('opened_Y1')) {
    slider.classList.remove('opened_Y1');
    slider.classList.add('closed_Y1');
  } else {
    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);


function toggleSlider_2() {
  if (slider_2.classList.contains('opened_Y2')) {
    slider_2.classList.remove('opened_Y2');
    slider_2.classList.add('closed_Y2');
  } else {
    slider_2.classList.remove('closed_Y2');
    slider_2.classList.add('opened_Y2');

  }
}

.content_EQ_Announcement_Y {
  margin: 0 auto;
  padding: 10px 0 10px 0;
  width: 33.2%;
  height: 300px;
  display: inline-block;
  float: left;
  border-right: 1px solid #e5e5e5;
  background: rgba(0, 0, 0, .0);
  text-align: center;
  cursor: pointer;
}

.Y1 {
  border-right: 0px solid #e5e5e5;
}

.EQ_Announcement_Y1 {
  overflow: hidden;
  position: absolute;
  height: 292px;
  width: 100%;
  background: rgba(0, 0, 0, .0);
  margin-top: 4px;
}

.slider_Y1,
.slider_Y2 {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, .0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0px;
  border: 1px solid #cccccc;
  z-index: 200;
  -webkit-transition: -webkit-transform .3s ease;
  -moz-transition: -moz-transform .3s ease;
  -ms-transition: -ms-transform .3s ease;
  transition: transform .3s ease;
}

.slider_Y1.opened_Y1 {
  -webkit-transform: translate(0, 0%);
  -moz-transform: translate(0, 0%);
  -ms-transform: translate(0, 0%);
  transform: translate(0, 0%);
  background: #fff;
}

.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
  -webkit-transform: translate(0, 100%);
  -moz-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

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

#toggle_Y11,
#toggle_Y21 {
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .0);
  width: 100%;
  height: 100%;
  text-align: left;
  position: absolute;
}

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>


<div class="EQ_Announcement_Y1">
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y1'>2016</div>
  </div>
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y2'>2017</div>
  </div>
  <div class='content_EQ_Announcement_Y'>
    <div id='toggle_Y3'>2018</div>
  </div>

  <div class="slider_Y1 closed_Y1">
    <div id='toggle_Y11'>
      PART 01
    </div>
  </div>
  <div class="slider_Y2 closed_Y2">
    <div id='toggle_Y21'>
      PART 02
    </div>
  </div>
</div>