做一个div向上显示，同时上下推兄弟姐妹div

Question

我想在单击按钮时使 div 向上显示，同时将其顶部和底部的其他 div 分别向上和向下推。下面是 link 的视频，说明它应该是什么样子：

我已经尝试了很多 jQuery 方法，例如 slideDown()、slideUp()、animate()... 但都没有成功。关于 JavaScript 部分，我尝试向上移动表单（必须显示）的动画，同时向下移动 div 和 class "widget"。问题是，小部件向下移动太快，整个动画不流畅，设置以毫秒为单位的时间也无济于事任何建议将不胜感激，非常感谢！

$("#anmelden").click(() => {
  $("#my_form").slideUp(1000);
});

$("#zufall").click(() => {
  $("#my_form").show("slide", {
    direction: "down"
  });
  $(".widget").animate({
    "top": "3.0rem"
  });
});

.widget {
  background-color: white;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  width: 19vw;
  position: relative;
  top: 4.5rem;
  margin: 4.8rem auto;
}

.container {
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border: 1px solid black;
  font-size: 1.4rem;
  padding-top: 0px !important;
  position: relative;
  bottom: 56rem;
  margin: 0 auto;
  width: 19vw;
  height: 40vh;
}

form {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 4rem;
  margin-top: 4rem;
  padding-top: 3rem;
  position: relative;
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div class="container">
  <div class="header">Title</div>
  <form action="submit" id="my_form">
    <input type="text" placeholder="Name" class="text_input">
    <input type="text" placeholder="Passwort" class="text_input">
  </form>
  <div class="widget">
    <button class="btn first_btn" id="zufall">zufalls button</button>
    <button class="btn second_btn" id="anmelden">anmelden</button>
  </div>
</div>

Answer 1

试试这个代码

$(document).ready(function() {
  $("#hider").click(function() {
    $("#going_hide").hide();
  });
});
$(document).ready(function() {
  $("#shower").click(function() {
    $("#going_hide").show();
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-2 col-md-2 col-md-2"></div>
    <div class="col-sm-8 col-md-8 col-md-8">
      <div class="well">
        <div class="row" id="going_hide">
          <div class="col-sm-2 col-md-2 col-md-2">
            <div class="form-group">
              <label for="usr">Name:</label>
              <input type="text" class="form-control" id="usr">
            </div>
            <div class="form-group">
              <label for="pwd">Password:</label>
              <input type="password" class="form-control" id="pwd">
            </div>
          </div>
        </div>
        <div class="row" id="going_show">
          <div class="col-sm-2 col-md-2 col-md-2">
            <div class="form-group">
              <button type="button" class="btn btn-warning" id="hider">Hide</button>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-danger" id="shower">Show</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-2 col-md-2 col-md-2"></div>
  </div>
</div>

Answer 2

这是我的方法

Codepen demo

整个部分是一个 flex 项目，垂直居中（带有一个小负数 margin-top）。 事实上，如果内容发生变化，结果是放置在该部分内的新内容在两个方向上推动所有兄弟元素的效果。

button 只是切换 .open class，它运行 CSS 动画显示（和隐藏）兄弟字段集（在标记中，按钮有在 fieldset 之前定义，但在 order 属性.

之后显示

标记

<section class="login">
  <h1>Wir suchen noch <br />Frontend-Helden</h1>

  <form>   
    <button type="button" class="login__btt login__btt--zufalls"
            data-collapsed-text="zufalls button"
            data-expandend-text="abbrechen">zufalls button</button>
    <button type="button" class="login__btt login__btt--anmelden">anmelden</button>

    <fieldset class="login__credentials">
      <ul>
        <li>
           <label for="username">User</label>
           <input type="text" id="username" />
        </li>
        <li>
          <label for="password">Password</label>
          <input type="password" id="password" />
        </li>
    </fieldset>
  </form>
</section>

CSS（仅相关，完整样式见演示）

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    min-height: 500px;
    text-align: center;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;  
    font-size: 1.5rem;  
    background: linear-gradient(135deg, #9bc, yellowgreen) 0 0 no-repeat;
    background-size: 100% 50vh; }


.login {
    width: 500px;
    margin: -20vh auto 0 auto; }


.login form {
    box-shadow: 0 0 20px #9bc;
    padding: 2em;
    display: flex;
    background: #fff;
    flex-direction: column; }


.login ul { 
    list-style-type: none; 
    margin: 0; padding: 0; 
    width: 100% }


.login li { 
    margin-bottom: 20px; 
    display: flex; 
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 300px; }


.login__btt {
    display: block;
    cursor: pointer;
    margin: 1em auto;
    order: 1;
    width: 300px;
    padding: .8em 2em;
    border: 1px #ccc solid;
    border-radius: 5px;
    font-size: .65em; }


.login__credentials {
    order: 0;
    border: 0;
    overflow: hidden;
    padding: 0;
    width: 260px;
    text-align: left;
    margin: 0 auto;
    opacity: 0;
    height: 0;
    transition: height 1s .1s, opacity .25s 0s; }


.open ~ .login__credentials {
    transition: height 1s 0s, opacity .5s .5s;
    height: 140px;
    opacity: 1; }

JS

let btt_zufalls = document.querySelector('.login__btt--zufalls');

btt_zufalls.addEventListener('click', function(){
    this.classList.toggle('open');
    this.textContent = [this.dataset.collapsedText, this.dataset.expandedText][+this.matches('.open')]
});

最终结果

做一个div向上显示，同时上下推兄弟姐妹div

Making a div to show upwards, while pushing up and down the siblings div

html

css

jquery

accordion