Question

$(".div3Btn").click(function() {
  $(".div2").show("slide", {
    direction: "up"
  }, 5000);
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div1">
  <div class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button class="div3Btn">Click me!</button>
  </div>
</div>

我对在时间和方向上使用show() / hide()函数有疑问。如上面的代码片段所示，如果单击该按钮，它将立即跳至底部，但不会跟随div1向下滑动。如果要使用该功能，该如何解决？

$(".div3Btn").click(function() {
  $(".div2").slideToggle(5000);
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
  <div class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button class="div3Btn">Click me!</button>
  </div>
</div>

（问题与使用Firefox运行链接功能非常相似）

另一个关于上下滑动的问题是，当我在某些div上使用flex: 1，然后使用slideToggle()函数时，它没有div的上下滑动动画。如果必须将flex: 1用于div，该如何解决？

Answer 1

我认为您将.show()函数的格式设置错误。尝试.show( duration [, easing ] [, complete ] )

$(".div3Btn").click(function() {
  $(".div2").show(5000, "swing", function() {
    // Animation complete.
  });
});

.div1 {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #919191;
}

.div2 {
  display: flex;
  overflow-y: auto;
  flex: 1;
  height: 500px;
  background-color: #a8d810;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div1">
  <div id="div2" class="div2" style="display: none;">hjghjgjghj</div>
  <div class="div3">
    <button id="div3Btn" class="div3Btn">Click me!</button>
  </div>
</div>

flex的上下滑动功能问题：1

1 个答案: