动画 div...无法让它停止推送所有 div (Magento)

Question

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

jQuery(document).ready(function() {
jQuery('.slidedown').hide(); 
  jQuery("button").click(function() {
    jQuery('.slidedown').animate({
   height: ['toggle', 'swing'],  
  }, 500, function() {    
  });
});

});

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

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

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

Answer 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 元素。

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

.mask-layer {height:0;overflow :visible;position:relative;z-index:2 /* 或任何数字，只要它大于其他元素的 z-index*/}