Question

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

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

});

所以我有一个div“slidedown”。按下按钮，它向下扩展。然而，当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元件。

P.S。可能会出现问题，购物车将显示在您的其他元素下方，以修复它只需将此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*/}

动画div ...无法让它停止推动所有div（Magento）

1 个答案: