点击按钮滑动div

Question

我有这段代码，但我卡住了。我需要它在页面打开时关闭，然后在单击按钮时向下滑动。有帮助吗？

$('#slide_button').click(function() {
  $('#slide').animate({
    height: 'toggle'
  }, 1500, function() {});
});

#content {
  background-color: #c0c0c0;
  border: 1px solid blue;
}

#slide {
  border: 1px solid red;
  background-color: #000;
  color: #fff;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slide">
  Slide content<br /> Slide content<br /> Slide content<br />
</div>
<div id="content">
  Content<br /> Content
  <br /> Content
  <br />
</div>

<button id="slide_button">Slide it</button>

Answer 1

如果您想实现此行为，请将您的 jquery 代码更改为

$('#slide_button').click(function() {
  $('#slide').animate({
    height: 'show'
  }, 1500, function() {
  });
});
$('#slide').animate({
  height: 'hide'
}, 0, function() {
});

但是，如果您希望按钮在每次点击时仍然显示，请将高度属性更改为 'toggle'

Answer 2

document.getElementById("slide_button").onclick = function() {
  if (parseInt(document.getElementById("slide").style.height) == 0) {
    document.getElementById("slide").style.height = "60px";
  } else {
    document.getElementById("slide").style.height = "0px";
  }
}

#content {
  background-color: #c0c0c0;
  border: 1px solid blue;
}

#slide {
  border: 1px solid red;
  background-color: #000;
  color: #fff;
  overflow: hidden;
  transition: 1s;
  height : 0px;
}

<div id="slide">
  Slide content<br /> Slide content<br /> Slide content<br />
</div>
<div id="content">
  Content<br /> Content
  <br /> Content
  <br />
</div>

<button id="slide_button">Slide it</button>

点击按钮滑动div

Click button to slide div

jquery

jquery-animate