Question

我试图创建一个打开的按钮，并在点击时隐藏div。我已经引用了以下codepen关于如何开始，但想要稍微不同的东西。在引用的codepen中，div＆＃34; row＆＃34;总是开放的，课程＆＃34;滑动＆＃34;点击即可打开和关闭。我其实想要div＆＃34; row＆＃34;单击完全打开和折叠，但似乎无法正常工作。

我目前的代码如下：

def process_row(r):
    # your sql statement may go here
    print('zip_code_new: ', r.zip_code_new)

df1.foreach(process_row)

#('zip_code_new: ', u'4002')
#('zip_code_new: ', u'5222')
#('zip_code_new: ', u'4022')
#('zip_code_new: ', u'4001')

有没有办法让整个＆＃34;行＆＃34; div显示/隐藏？谢谢！

Answer 1

它使用的是.slide，这是Slide类，你想要一个名为test的那个：

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

它在代码笔中被称为行，但在上面的代码中进行测试，如果它实际上是('.row')那么它将是maven { url 'https://maven.google.com' } :(

Answer 2

您只需将.slide-up添加到.row课程而不是.slide课程。我相信你想要的。

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

.slide-up {
  height:0px;
}

CodePen

Answer 3

您还可以使用 jQuery 的.slideToggle() method向上/向下滑动。像这样：

$(() => {
  $('#toggleSlider').on('click', () => {
    $('.row').slideToggle(500);
  });
});

.row {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 400px;
  overflow: hidden;
}

.slide {
  background-color: rgba(0, 255, 0, .3);
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleSlider">Toggle Slider</button>
<div class="row">
  <div class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim minus repellat amet nobis hic dolores blanditiis inventore quo ex quaerat omnis accusantium adipisci velit laborum facilis culpa nemo ab placeat!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates tempore optio est nihil earum neque atque vero voluptatibus deserunt. Doloribus error voluptatem non quo molestias quisquam repellat odio tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus culpa voluptate architecto deserunt nemo animi officiis debitis necessitatibus deleniti nobis pariatur doloribus facilis suscipit ipsa earum consectetur eligendi. Perspiciatis ratione. lorem</div>
</div>

Answer 4

我不太明白你的意思，但我的声誉还不够（50）也添加评论。你的意思是文字覆盖下面的div？

也许你可以试试这个：

.slide {
position: absolute;
background-color:none;
padding: 5px;
transition: .5s cubic-bezier(0, 1, 0.5, 1);
transform: translateY(0);
overflow: hidden;
z-index: -1;
}

Answer 5

hare是您想要的代码

<html>
<body >
<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="parent">
<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>
</div>
</body>
<style>

.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;
  }
}
.parent{
  overflow: hidden;
}
.test {
  border: 1px solid rgba(255, 0, 0, .7);
  width: 100%;
  overflow: hidden;
  transition: .5s cubic-bezier(0, 1, 0.5, 1);
  transform: translateY(0);
}

.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%);
}
</style>

<script>
var toggleButton = document.getElementById('questionnaire'),
            slide = document.querySelector('.slide');
            test =  document.querySelector('.test');

    toggleButton.addEventListener('click', toggleSlider, false);

    function toggleSlider() {
        if (slide.classList.contains('slide-up') && test.classList.contains('slide-up')) {
            slide.classList.remove('slide-up');
            test.classList.remove('slide-up')
        } else {
            slide.classList.add('slide-up');
            test.classList.add('slide-up');
        }
    }
    </script>
    </hrml>

完全可折叠div的问题

5 个答案: