html - 如何将我的抽屉内容移动到所有按钮下方，而不是按照当前的方式在选定按钮之后打开？

Question

这是我的代码笔https://codepen.io/jasoncalk/pen/GRrgXyK 正如您在单击按钮 1 或按钮 2 时看到的那样，它会打开，然后在内容之后移动其余按钮。我希望内容出现在整个按钮集之后。

HTML

.cabinet {
  display: block;
}

.drawerContent {
  overflow: hidden;
  border-bottom: 1px solid orange;
  padding-bottom: 10px;
  line-height: 1.5;
}

.drawerContent:not(.active) {
  display: none;
}

.close {
  float: right;
  display: inline-block;
  padding: 2px 5px;
}

.close:hover {
  cursor: default;
  float: right;
  display: inline-block;
  padding: 2px 5px;
  color: #e78333;
}

<div class="cabinet">

<button class="standardButton">Drawer 1</button>
<div class="drawerContent">
  <span class="close">x</span>
  <p>in principio erat Verbum et Verbum erat apud Deum et Deus erat Verbum hoc erat in principio apud Deum</p>
</div>

<button class="standardButton">Drawer 2</button>
<div class="drawerContent">
  <span class="close">x</span>
  <p>omnia per ipsum facta sunt et sine ipso factum est nihil quod factum est in ipso vita erat et vita erat lux hominum</p>
</div>

<button class="standardButton">Drawer 3</button>
<div class="drawerContent">
  <span class="close">x</span>
  <p>et lux in tenebris lucet et tenebrae eam non conprehenderunt fuit homo missus a Deo cui nomen erat Iohannes hic venit in testimonium ut testimonium perhiberet de lumine ut omnes crederent per illum</p>
</div>  
  
</div>

jQ

$('.standardButton').click(function() {
  $(this).next('.drawerContent').slideToggle('400', "swing", function() {
    //Animation Complete
  });
});
$('.close').click(function() {
  $(this).next('.drawerContent').slideToggle('400', "swing", function() {
    //Animation Complete
  });
});

标签： htmljquerycss