animated div ...すべてのdivを押すのを止められない（Magento）

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があります。ボタンを押すと下に広がります。しかし、divがアニメートすると、ページ上の他のdivもすべてプッシュダウンされます。私はdivを展開したいが、ページ上の他のすべてを上書きする。私が達成しようとしているのは、実際にはMagentoのショッピングカート表示をドロップダウンしたことです。ヘッダーにある「ショッピングカート」の上にマウスを置くと、カートの内容が表示されたdivに表示されます。 div要素の中にカートの内容を挿入（「正しい」）getChildHtmlを呼び出す

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

：私は、カートの内容がでdivの中に表示させます。それはうまく動作します。これまで私は、Magentoですべてのページが使用している2columns-left.phtmlテンプレートのさまざまな場所にそのdivを配置してみました。しかし、どこでも私はその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.

.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*/}

：カートはちょうど .mask-layerにこのCSSを追加し、それを修正するために、あなたの他の要素の下に表示される場所の問題は、発生する可能性があります