Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Роскладное меню (https://javascript.ru/forum/misc/53837-roskladnoe-menyu.html)

alma95 20.02.2015 16:18

Роскладное меню
 
Всем добрый день!
Есть готовое вертикальное, раскладное меню, оно в данный момент стоит в правом блоке на данном сайте: листовка.com.ua
Вот исходники этого меню:
$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideToggle('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}

			});

		});

<ul class="accordion">
			<li id="one" class="files">
                <a href="#one">Услуги печати</a>
				<ul class="sub-menu">				
					<li><a href="#">офсетная печать</a></li>					
					<li><a href="#">цифровая печать</a></li>
					<li><a href="#">печать на ризографе</a></li>					
					<li><a href="#">шелкотрафаретная печать</a></li>
				</ul>
			</li>			
			<li id="three" class="mail">
				<a href="#two">Услуги дизайна</a>
				<ul class="sub-menu">					
					<li><a href="#">разработка фирменного стиля</a></li>					
					<li><a style="font-size: 8.6pt;" href="#">разработка рекламной открытки</a></li>
				</ul>
			</li>			
			
		</ul>


Проблема в том, что оно по клику разворачивается но надо что бы по второму клику - сворачивалось обратно. Как тут: http://fly-card.ru/

Помогите пожалуйста решить проблему. Уже весь инет обшарил, решения не нашел. А яваскрипт не знаю :(

arcmag 20.02.2015 16:48

Как вариант можно устроить проверку при клике проверять класс меню если меню открыто у него будет класс "open" если закрыто класс "close"

То есть при запуске функции мы проверяем класс у меню если класс "open" то удаляем этот класс присваиваем класс "close" иначе наоборот удаляем класс "close" открываем меню и присваиваем класс "open" я часто использую такой метод, хотя может он и не самый лучший но мне кажется неплохим.

alma95 20.02.2015 16:51

arcmag,
И таким образом можно будет не только развернуть один элемент но и свернуть? Так как и надо?))
Можете скинуть этот метод?

alma95 20.02.2015 19:12

Ребят, помогите, я заплачу, если надо

alma95 20.02.2015 19:58

Все, ребят, отбой :-)
Я нашел чем заменить, нарыл: http://cssmenumaker.com/menu/elegant-accordion-menu

Может кому то пригодится. Тоже из разряда аккардион меню


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