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

【问题标题】：Slide down and up function problem with flex: 1flex的上下滑动功能问题：1
【发布时间】：2019-08-14 16:26:43
【问题描述】：

$(".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() 函数的问题。如上面sn-p所示，如果按钮被点击，会立即跳到底部，而不是跟随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的向下或向上滑动动画。如果我必须对 div 使用 flex: 1，如何解决？

【问题讨论】：

嘿！我编辑了你的问题。 JSFiddle 链接是好的，但是将代码格式化为 sn-p 会更好。您可以在this Stack Overflow blog post 中找到有关 sn-p 的介绍

标签： javascript jquery css flexbox slidedown

【解决方案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>

【讨论】：