动画 div... 无法停止推送所有 div (Magento)答案

【问题标题】：animated div... can't get it to stop pushing all divs (Magento)动画 div... 无法停止推送所有 div (Magento)
【发布时间】：2011-01-05 13:28:08
【问题描述】：

这有点难以解释，但在这里。我有一个 div，它使用 jquery 使用切换来为其高度设置动画。基本上 div 最初是隐藏的，但是如果您按下按钮，它会扩展 css 中定义的高度。这是js：

jQuery(document).ready(function() {
jQuery('.slidedown').hide();
  jQuery("按钮").click(function() {
    jQuery('.slidedown').animate({
   高度：['切换'，'摆动']，
  }, 500, 函数() {
  });
});

});

所以我有一个“slidedown”类的 div。按下按钮，它会向下扩展。但是，当 div 动画时，它也会将我页面上的所有其他 div 向下推。我只希望 div 扩展但浏览页面上的所有其他内容。我想要实现的实际上是 Magento 中的下拉购物车显示，您将鼠标悬停在标题中的“购物车”一词上，然后购物车的内容出现在显示的 div 中。我通过以下方式使购物车内容出现在 div 中：

<div class="slidedown"><?php echo $this->getChildHtml('right') ?></div></pre>

调用 getChildHtml('right') 将购物车内容插入到 div 中。这很好用。到目前为止，我只尝试将该 div 放在我所有页面在 Magento 中使用的 2columns-left.phtml 模板中的不同位置。但是在我尝试插入该 div 的任何地方，当它扩展时，它会弄乱所有其他 div。有任何想法吗？感谢您的意见。

【问题讨论】：

标签： javascript jquery magento html

【解决方案1】：

有几种方法可以做到这一点，要么使其绝对定位。 -- 老实说，我不建议这样做。

我认为更好的方法是添加一个父 div 并将其高度设为 0：

HTML：

<div  class='mask-layer'>
  <div class="slidedown"><?php echo $this->getChildHtml('right') ?></div>
</div>

CSS：

.slidedown {/*for this class you keep the same code */}
.mask-layer {height:0;overflow:visible}

这样你会在你的购物车中添加某种掩码，所以无论它有多大，浏览器都会查看它的父 div 并看到它的高度为 0 并且不会推送任何其他 HTML元素。

附：可能会出现问题，购物车将显示在您的其他元素下方，要修复它只需将此 CSS 添加到 .mask-layer：

.mask-layer {height:0;overflow:visible;position:relative;z-index:2 /* or any number as long as it is larger than the z-index of your other elements*/}

【讨论】：