Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2014, 13:01
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

Анимация раскрытия списка JS+CSS по щелчку
Сделано дерево в списках ul li, канонично, в общем. Класс .tree_menu ul - по умолчанию для всех не коренных UL. Класс ul.menu_hide вешается на все некоренные UL и их, соответственно не видно. Разница там только в max-height как видите:

Код:
.tree_menu ul {
	max-height: 2000px;
	overflow: hidden;
	background-color:#F0F0F0;
	transition: all 1s ease ;
}

ul.menu_hide {
	max-height: 0px;
	overflow: hidden;
	background-color:#F0F0F0;
}

Кусок хтмля.

<li id="menu4"><a href="#">Категория</a>
	<ul class="menu_hide">
		<li id="menu5"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu6"><a href="url">Продукт1</a></li>
				<li id="menu7"><a href="url">Продукт2</a></li>
			</ul>
		</li>
		<li id="menu8"><a href="#">Суб категория</a>
			<ul class="menu_hide">
				<li id="menu9"><a href="url">Продукт3</a></li>
				<li id="menu10"><a href="url">Продукт4</a></li>
			</ul>
		</li>
	</ul>
</li>


Ява-скрипт развешивает события щелчка и в принципе больше ничего не делает кроме отключения/включения выбранного UL. Поскольку UL выбрать нельзя, он просто находится как parent щелкнутого LI:

var child_ul = find_child_ul(this);
if(child_ul)
	child_ul.classList.toggle('menu_hide');


Так вот, в принципе все работает. Щелкнутый пункт (визуально) раскрывается с анимацией, и скрывается с анимацией но перед закрытием он думает ровно столько, сколько длится анимация. То есть там 1 секунда нарисована, браузер 1 секунду думает прежде чем за следующую секунду свернуть UL с глаз долой.

Вопрос, откуда берется пауза, как ее избежать применительно к представленной структуре, или как вообще это сделать.
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2014, 13:09
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

То есть находится как child.

Я пробовал анимировать самим скриптом, но там сразу возникает куча геморроя, например самое простое узнать какова будет высота UL можно умножив высоту дочерних LI на их количество, но в разных браузерах по-разному. В ФФ надо добавлять 1 пиксел, а в Хроме - надо вычитать 2 пиксела. Одуреешь. Хотелось бы просто переключением классов. Точнее отключением одного класса.
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2014, 14:46
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

Кажись это большой max-height виноват. Когда открывается то просто не видно что браузер еще там досчитывает до 2000, а когда закрывается то видно что браузер отсчитывает от 2000. Я уменьшил до 600, но где гарантия что какое-то меню не окажется больше. Гемор, короче. Просто не получается.
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2014, 17:12
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

Зло%$#е списки. Сделал как умные люди делают - скрыть все LI и открывать их по щелчку на заранее открытом переключая класс - х нанэ. Заранее открытый имеет заданную высоту которая уже не меняется и соответственно внутри него тупо ничего не появляться, хотя оно и появляться за счет увеличения высоты ранее раных 0. Как зашибись без анимации - display:bliock | dusplay:none - и все щелкает как из пушки.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2014, 22:47
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

В общем забил, там можно подогнать динамику на открытие/закрытие, подогнал.

.tree_menu ul {
		padding:0;
		margin:0;
		list-style-type: none;
		color:#5d5541;
		background-color:#ead9b8;
		overflow: hidden;
		max-height: 500px;
		transition: max-height 1s 0s ease-in;
	}

	ul.menu_hide {
		overflow: hidden;
		max-height: 0px;
		transition: max-height 0.5s -0.3s ease-out;
	}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамический CSS средствами JS Aspiring Общие вопросы Javascript 9 10.09.2010 18:31
Удаление CSS свойста с помощью JS Hurley Internet Explorer 2 01.10.2009 20:55
CSS Class & JS keysi_ Общие вопросы Javascript 10 29.04.2009 17:37
Как создать ассоциативный массив JS + CSS occlusion Общие вопросы Javascript 3 12.01.2009 08:19
Ajax. Полноценная подгрузка страниц, содержащих CSS и JS. Alex22 AJAX и COMET 6 05.11.2008 22:53