Question

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

 $(".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/

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

当我插入新元素时，如何将DOM元素向下移动以使它们不重叠？

1 个答案: