javascript - 完全可折叠 div 的问题

Question

我正在尝试创建一个在单击时打开和隐藏 div 的按钮。我一直在引用以下codepen关于如何开始，但想要一些稍微不同的东西。在引用的 codepen 中，div“row”始终打开，类“slide”在单击时打开和关闭。我实际上希望 div“行”完全打开并在单击时折叠，但似乎无法使其正常工作。

我当前的代码如下所示:

<div class="wrapper">
  <div class="child">
    <a href="javascript:void(0)" id="questionnaire">
      <i class="fa fa-clipboard fa-3x fa-fw" aria-hidden="true"></i>
      <h4>Questionnaire</h4>    
    </a>
  </div>
</div>
<div class="test">
  <div class="slide">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl tellus, mattis vitae tortor quis, dictum volutpat ipsum. Duis facilisis enim vel pharetra mollis. Mauris eget dui commodo, pharetra mauris ac, volutpat nunc. Duis nec viverra leo, a rutrum quam. Quisque ac porta odio. Morbi velit erat, aliquam non arcu tempus, consequat finibus diam. Duis commodo ante nulla, vitae sodales felis interdum nec. Duis ac eros in magna tempor ornare quis quis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin varius tempor urna id placerat. Proin condimentum vitae magna eget consectetur. Duis a consequat justo, vitae tristique mauris. Vivamus porta urna arcu, nec faucibus magna ullamcorper id.
  </div>
</div>

.wrapper {
  display:flex;
  justify-content:space-evenly;
  width:100%; 
  background: url(https://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg);
}

.child {
  flex:1;
}

.child, .child a {
  display:flex;
  flex-direction:column;
  align-items: center;
  color: $overdue;
}

.child i {
  border: 3px solid $overdue;
  border-radius: 25px;
  padding: 0.5em;
}

.child i, .child h4 {
  transition: all 0.5s linear;
}

.child a:hover {
  i {
    background: $overdue;
    color: $color-lightest;
    box-shadow: 0 0 0 0 $overdue;
    -webkit-animation: rubberBand 1s;
    animation: rubberBand 1s;
  }
  h4 {
    color: $color-lightest;
  }
}

.fa-fw {
  width: 2.3em;
}

@media screen and (max-width: 768px) {
  .wrapper {
    flex-direction: column;
    align-items:center;
    align-content: space-around;
  }  
  .wrapper .child {
    margin-top: 1em;
  }
}

/*.test {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 100%;
  overflow: hidden;
}*/

.slide {
  //background-color: rgba(0, 255, 0, .3);
  background-color:none;
  padding: 5px;
  transition: .5s cubic-bezier(0, 1, 0.5, 1);
  transform: translateY(0);
  overflow: hidden;
}

.slide-up {
  transform: translateY(-100%);
}

var toggleButton = document.getElementById('questionnaire'),
            slide = document.querySelector('.slide');

    toggleButton.addEventListener('click', toggleSlider, false);

    function toggleSlider() {
        if (slide.classList.contains('slide-up')) {
            slide.classList.remove('slide-up');
        } else {
            slide.classList.add('slide-up');
        }
    }

有没有办法让整个“行”div 显示/隐藏？谢谢!

Answer 1

您只需将 .slide-up 添加到 .row 类，而不是 .slide 类。我相信这就是你想要的。

var toggleButton = document.getElementById('toggleSlider'),
    slide = document.querySelector('.row');

.slide-up {
  height:0px;
}

CodePen