javascript - 插入新元素时如何向下移动 DOM 元素，以免它们重叠？

Question

所以我有一个 javascript 函数，可以在单击按钮时插入一个跨度。但问题是当我插入它时，它与其他元素重叠。单击按钮为插入的元素腾出空间时，如何向下移动其他元素？然后在删除元素时将它们移回原处？这是我的代码:

 $(".top-button").on("click", function() {
  if (this.nextElementSibling) {
    $(this.nextElementSibling).slideToggle(600);
  };
 });

$(".bottom-button").on("click", function() {
  $(this.nextElementSibling).slideToggle(600);
});

这里有一个工作演示 http://codepen.io/andrewcockerham/pen/xjgkL/

基本上，当我单击条目 1 上的黄色和绿色“按钮”时，MP 和 IP 框会切换，但它们与其他元素重叠(当条目 1 折叠时，{单击它})。如何在 MP 和 IP 出现时让其他元素移出腾出空间，然后在 MP 或 IP 消失时返回其正常位置？

我试过 appendChild()、insertAfter()、insertBefore()，都没有成功。

请原谅丑陋的演示和丑陋的代码 - 它是一个 WIP!谢谢!

Answer 1

所以我想出了怎么做，所以我会回答我自己的问题。

基本上我只是在插入的跨度“后面”插入一个空白或空的 div，从而将 DOM 向下或向上移动。这是 JS 代码:

$(".top-button").on("click", function() {
  if (this.nextElementSibling) {
    if ($(this.nextElementSibling).css('display') == "none") {
      // insert blank element to move the DOM down
      $("<div class='top-blank'><span></span></div>").insertBefore($(this).parent());
    } else {
      // remove blank element when collapse dropdown
      $(this).parent().siblings('.top-blank').slideUp(600);
    }
    $(this.nextElementSibling).slideToggle(600);
  };
});

$(".bottom-button").on("click", function() {
  if ($(this.nextElementSibling).css('display') == "none") {
    $("<div class='blank'><span></span></div>").insertAfter($(this).parent());
  } else {
    // remove inserted stuff
    $('.blank').slideUp(500);
  }
  $(this.nextElementSibling).slideToggle(600);
});

和CSS:

.blank {
  position: relative;
  min-height: 60px;
  border-left: 2px solid white;
  left: -50px;
}
.top-blank {
  position: relative;
  min-height: 60px;
}

更新了 Codepen 工作示例:http://codepen.io/andrewcockerham/pen/xjgkL/

不确定这是否是最好或最合适的方法，但它适用于我的情况。有兴趣听听是否有其他更好的解决方案。