准备/在屏幕外追加一个div？

Question

我正在尝试创建一个div，它有两个按钮:一个在原始的右侧加上一个相同大小的div，而不移动原始div的位置，另一个按钮将div附加到原始的右侧。

附加到左边可以正常工作，但左前移动整个容器在在这里显示上

用于添加元素的代码：

$(document).ready(function() {
  $("#back").on("click", function(e) {
    e.preventDefault();
    $("#center").before("<div id='back' class='inside'></div>");
  });
  $("#next").on("click", function(e) {
    e.preventDefault();
    $("#center").after("<div id='next' class='inside'></div>");
  });
});

如何在不改变原div的位置的情况下，将原来的div放在左边，使其“脱离屏幕”？提前感谢！

Answer 1

您的问题的解决方案最好使用CSS解决。

在初始插入时，只需将display:none设置为左侧DIV即可。

改变这一点：

$("#center").before("<div id='back' class='inside'></div>");

对此：

$("#center").before("<div id='back' class='inside' style='display:none;'></div>");

当您希望CSS属性可见时，移除它：

$('#back').css('display', '');

然而，在大多数情况下，内联样式的使用是不好的做法。您应该考虑通过分配给元素ID display:none的样式表来设置#back。对于可维护的代码，您需要保持风格(CSS)、结构(HTML)和UI功能(JS)的清晰分离。

Answer 2

尝试为包含的div设置以下CSS

div.whatever {
position:absolute;
overflow:hidden;
}