0

我的目的是将 div 转换为宽度和高度 0，从而逐渐使其对用户不可见。我有以下绝对定位的 div：

<div id="main" style="width: 200px; height: 100px; left: 648px; top: 253px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

当用户按下关闭 div 时，我将以下 css 类附加到“主”div：

.collapseRecommendation {


 -webkit-transition: all 1.0s ease-in-out;
  -moz-transition: all 1.0s ease-in-out;
  -o-transition: all 1.0s ease-in-out;
  transition: all 1.0s ease-in-out;
}

并在 javascript (extjs) 代码中将 div 的宽度和高度设置为 0：

 mainDiv.setStyle('width', '0px');
 mainDiv.setStyle('height', '0px');

而且我还设置了“主” div 不同的左侧和顶部位置，这确实按预期工作。

然而，只有“主” div 的高度和宽度设置为 0，但内部的 div 大小没有改变，它保持在同一个地方并且对用户可见，所以在转换后我有以下内容：

<div id="main" style="width: 0px; height: 0px; left: 348px; top: 153px; z-index: 19200;position: absolute !important;" tabindex="-1"><div width: 200px;height: 150px;"><div style="width:150px;height:100px;border:1px solid black">hello<div style="width:50px;height:50px">close</div></div><div id="ext-comp-1060-clearEl" class="x-clear" role="presentation"></div></div></div>

如您所见，内部 div 的大小仍然为 200x150。它也没有变成 o 大小的原因是什么？谢谢

4

1 回答 1

0

我们不应该期望子 div 的大小会改变，不是吗？

当涉及到像divs 这样的块元素时，它们的宽度仅取决于其父元素的宽度，因为大多数浏览器将块元素视为已width: 100%设置它们。但是，当您明确设置样式时，此处理将被覆盖，并且它们的尺寸完全独立于彼此。

div当您指定和不指定它们的宽度时，此 JSFiddle显示了嵌套 s 的行为。如果单击 div，您会看到它们调整大小。顶部 div 独立调整大小；底部的 div 保持相同的宽度。同样，这是因为没有明确声明宽度。

解决方案是以编程方式更改每个子 div 的尺寸。为此，您可以循环遍历孩子并设置它们的所有尺寸。代码可能类似于：

var children = mainDiv.childNodes;
for( i = 0; i < children.length; i++ ) {
  if ( children[i].nodeType == 1 ) {
    // Do something with children[i]
  }
}
于 2013-05-19T14:14:42.207 回答