JavaScript和CSS3翻译y下拉

Question

我有一个下拉div，它有一个打开/隐藏按钮，我想转换：translatey（-280px）; slide-up的div。

问题在不同的设备中，transform：translatey：translatey（-280px）; is不同的！有时它并没有完全上升，并且显示了一半的DIV！

如何在任何其他设备中完全滑动div？

CSS：

.slideUp {
    -webkit-transform: translateY(-280px);
    transform: translateY(-280px);
    transition: transform 0.5s ease-out;
}

.slideDown {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: transform 0.5s ease-out;
}

JavaScript：

$('#arrow-down').click(function() {
    header.classList.remove("slideUp");
    header.classList.add("slideDown");
    $('#arrow-down').css('display', 'none');
    $('#arrow-up').css('display', 'block');
});

$('#arrow-up').click(function() {
    header.classList.remove("slideDown");
    header.classList.add("slideUp");
    $("#arrow-up").css("display", "none");
    $("#arrow-down").css("display", "block");
});

Answer 1

下拉的下拉方式可与所有屏幕尺寸一起使用，您可以将其更改为单击而不是悬停。

.drop-button {
  padding: 10px;
  background-color: #B0E0E6;
  border: 1px solid #007BFF;
  border-radius: 0.5em;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .content {
padding: 10px;
  border: 1px solid black;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  display: none;
  position: absolute;
}

.dropdown:hover .content {
  display: block;
}

<div class="dropdown">
  <button class="drop-button">Click Drop</button>
  <div class="content">
    <span>Dropdown Content!</span>
  </div>
</div>