анимированный 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() {    
  });
});

});

Итак, у меня есть div с классом "slidedown".Нажмите кнопку, и она расширяется вниз.Однако, когда div оживляет, он сбрасывает все остальные div на моей странице.Я просто хочу, чтобы div расширялся, но перебирал все остальное на странице.То, чего я пытаюсь добиться, это на самом деле выпадающий дисплей корзины покупок в Magento, вы наведите курсор мыши на слово «корзина покупок», которое находится в заголовке, и затем содержимое корзины появится в раскрывающемся div.Я делаю содержимое корзины в div следующим образом:

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

Вызов 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*/}