Javascript 在切换div的宽度时，如何保持内部元素的位置？

这是jquery代码：

$(document).ready(function(){
  $("#presets-toggle").click(function () {

      if ($(this).text() === "►"){
        $(this).text("◄")
      }
      else {
        $(this).text("►");
      }

      $("#presets").animate({width:'toggle'},250);

  });
});

---

宽度减小会在切换时改变布局。我希望它们看起来是固定的。

假设您的HTML类似于：

<div id="presets"></div>
<div id="presets-toggle">►</div>
<div id="noise"></div>

然后，根据您的情况，您将有两个选项继续：

a） 添加以下CSS，将其值更改为“预设值”

div

：

<div id="container">
    <div id="presets"></div>
</div>

b） 或者，如果

div

的尺寸未知：

---

您必须显示相关的HTML和CSS。在不查看布局的情况下无法回答布局问题。需要一个JSFIDLE…要设置固定的#预设切换还是#预设？#预设是包含的元素。我要做一个JSFIDLE！

#container {
    width: 500px;
    height: 500px;
}

var height = $("#presets").height() + "px";
var width = $("#presets").width() + "px";
$("#presets-toggle").click(function () {
    if ($(this).text() === "►") {
        $(this).text("◄")
    } else {
        $(this).text("►");
    }
    $("#container").css({
        'height': height,
        'width': width
    });
    $("#presets").animate({
        width: 'toggle'
    }, 250);
});