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

时间：2018-11-16 18:07:11

标签： javascript html css

我已经在“显示/隐藏多个”弹出窗口上创建了一个笔：https://codepen.io/Volabos/pen/BGdBKw

如您所见，这里我们为2016，2017和2018提供了3个部分。目的是当用户单击它们时，不同的窗口将滑动显示不同的信息。

我的实现在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>

2 个答案:

答案 0 :(得分：1)

.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;
}

答案 1 :(得分：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>

相关问题
最新问题