javascript - 完全可折叠的 div 的问题

Question

我正在尝试创建一个按钮，该按钮在单击时打开和隐藏一个 div。我一直在引用以下 codepen关于如何开始，但想要一些稍微不同的东西。在引用的 codepen 中，div“行”始终打开，类“幻灯片”在单击时打开和关闭。我实际上希望 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