动画div ...不能让它停止推动所有div（Magento）

这有点难以解释，但在这里。我有一个div使用jQuery来使用切换动画来创建它的高度。基本上div最初是隐藏的，但如果你按下一个按钮，它将扩展在CSS中定义的高度。这是js：动画div ...不能让它停止推动所有div（Magento）

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

});

所以我有一个类“幻灯片”的div。按下按钮，它向下扩展。但是，当div动画时，它也会将我网页上的所有其他div都推下来。我只想让div扩展，但是可以浏览页面上的所有其他内容。我试图实现的实际上是在Magento中的一个下拉式购物车显示，您将鼠标放在标题中的“购物车”一词上，然后购物车的内容出现在显示的div中。我让车的内容被显示在div：

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

调用，直到最底层（“右”）插入车内容进入格。这工作正常。到目前为止，我只尝试将该div放在2columns-left.phtml模板中的所有页面在Magento中使用的各个位置。但是，无论我在哪里尝试插入该div，当它展开时都会混淆其他所有内容。有任何想法吗？感谢您的输入。

来源

2011-01-05 Jeddizero

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

在我看来，一个更好的办法是增加一个父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*/}

来源

2011-01-05 13:41:11 Dan

动画div ...不能让它停止推动所有div（Magento）

回答

相关问题