Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   slideDown и абсолютное позиционирование (https://javascript.ru/forum/jquery/60438-slidedown-i-absolyutnoe-pozicionirovanie.html)

Bond 29.12.2015 21:57

slideDown и абсолютное позиционирование
 
Всем здравствуйте.
Есть ламерский вопрос - буду признателен если кто поможет.
Есть блок родитель с дочерним блоком к примеру
<style>
	.parent{
		position: relative;
		border: 1px solid #000;
		width: 500px;
	}
	.child{
		display: none;
		position: absolute;
	}
	.button{
		cursor: pointer;
		padding: 10px 0;
		width: 150px;
		text-align: center;
		border: 1px solid #000;
	}
</style>
<div class="button">
	ВКЛ. ВЫКЛ :)
</div>
<div class="parent">
	<div class="child">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aperiam repellat sint rem assumenda perferendis minus repudiandae error modi recusandae, reprehenderit iste ipsam ullam quae autem totam minima obcaecati officiis!
	</div>
</div>
Какой то текст
<script>
	$(document).ready(function() {
		$(".button").click(function() {
			if ($('.child').is(':visible')) {
				$('.child').slideUp();
			} else {
				$('.child').slideDown();
			}
		});
	});
</script>

Дочерний блок как видно по стилям абсолют и невидимый, но он появляется и исчезает при нажатии некой кнопки с помощью slideUp slideDown (да не с помощью slideToggle) но он не влияет на высоту родительского блока так как имеет абсолютное позиционирование.
Можно ли сделать так что бы родительский блок вел себя так вроде как абсолютного позиционирование не было бы? А именно что бы родитель принимал высоту своего контента, только не по окончании анимации а во время ее действия.
Только еще надо учесть что блоков таких как дочерний может быть несколько

Deff 29.12.2015 22:00

Цитата:

Сообщение от Bond
родительский блок вел себя так вроде как абсолютного позиционирование не было бы?

Поясните, а нафига дочернему тады absolute ?
Что оно вам даёт ?

Bond 29.12.2015 22:08

Deff,
Ну это я упрощенно дал верстку, там все более запутано - там идут вкладки во вкладках с табами и так получается что тело контента в позишн абсолют. Ну что то похожее на выпадающее меню где подменю в позишн абсолют. Короче абсолют отменить не вариант - много переделывать придется. Надо просто сделать что бы родитель растягивался за своим абсолютным контентом.

Deff 29.12.2015 22:09

Bond,
Тады считаете сумму высот нескрытых дочерних и задаёте эту высоту родителю (наверно вставкой подсчета и записи css в процессе анимации

Bond 29.12.2015 22:11

Deff,
Да но это можно сделать по окончанию слайда, я так и сделал поначалу но не вариант думаю - получается заканчивается слайд а потом за ним я увеличиваю родителя. Можно так но не желательно.

Deff 29.12.2015 22:12

Bond,
Ну дык в процессе анимации и анимируете одновременно и высоту родителя

Deff 29.12.2015 22:14

Но вообщем задача высосана из пальца, ибо проще не делать абсолютную позицию, скорее всего лень было ставить margin - поставили top и left
Мон у дочерних делать position:relative; margin:auto;
И позиционировать тем жа top и left
================
Лучше приводить ссылки на полный HTML c проблемами для реальных советов

Bond 29.12.2015 22:15

Deff,
В этом и вопрос - как это сделать ) Немного не хватает знаний...

Bond 30.12.2015 00:32

Deff,
Нет, топ лефт не вариант - там 8 табов, и получается под каждый писать топ лефт не вариант - если добавиться 9-й таб его контент тоже придется настраивать. Без абсолюта можно было бы сделать если вынести контент из табов отдельно - но другая загвоздка есть - верстка респонс - для мобилы надо что бы контент был в своем табе а не отдельно.
Решил сделать по другому - убрал слайд, сделал просто дисплей блок или none а после пересчитываю высоту родителя. Все происходит мгновенно.
Deff, спасибо за участие

Deff 30.12.2015 00:41

Bond,
блин, еще раз, я не понимаю, если там тьма табов с абсолютом, наверно нун выбирать наибольший по высоте(а не сумму) ?
Легче дать ссыль на реальную страницу и спрашивать!


Часовой пояс GMT +3, время: 16:44.