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,
блин, еще раз, я не понимаю, если там тьма табов с абсолютом, наверно нун выбирать наибольший по высоте(а не сумму) ?
Легче дать ссыль на реальную страницу и спрашивать!

Bond 30.12.2015 01:40

Deff,
Реальной пока не было, но уже есть http://1.perevozki-ok.ru/gorod/
Табы о которых речь под блоком Грузовое такси Москва с текстом "Что Вас интересует?" слева.
Вот такие табы - их не тьма а 8 штук абсолют задан потому что удобно для всех прописать left 0 right 0 относительно самого главного блока чем задавать им margin для каждого свой. А весь контент выносить отдельно тоже не вариант потому что посмотрите как должно быть при ширине монитора ниже 960 пикс
На сайте пока бардак, много лишнего есть, но думаю по вкладкам разберетесь
Слайд был при клике на текст Открыть вкладку выезжал контент, и за ним надо было растягивать самый первый родитель.

Deff 30.12.2015 01:59

Bond,
Ну обрами все табы в div с position;relative; и задай ему максимальную высоту и ширину из всех табов ?

Bond 30.12.2015 02:11

Deff,
В принципе так решил, просто для мобилы слайд сделаю, а для пк будет как есть. А высоту задавать не вариант - может быть слишком много пустого места внизу - там во внутренних вкладках будет текст может быть и 100 строк + возможно картинка. Да и самих вкладок будет много
Решили так как сейчас оставить - хотя со слайдом было бы лучше.


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