Question

这是jquery代码：

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

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

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

  });
});

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

Answer 1

这是一个通用的解决方案，假设您的HTML类似于：

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

首先，在“预设”div中添加“容器”div：

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

然后，根据您的具体情况，您可以选择两种方式：

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

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

b）或者，如果div的尺寸未知：

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);
});

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

1 个答案: