Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Скрипт для сворачивания меню в Джумле (https://javascript.ru/forum/events/23227-skript-dlya-svorachivaniya-menyu-v-dzhumle.html)

X-Master 16.11.2011 22:07

Скрипт для сворачивания меню в Джумле
 
Столкнулся с такой задачей:
В CMS Joomla нужно организовать двухуровневое меню такого типа:

Пункт 1
Пункт 1.1
Пункт 1.2
Пункт 2
Пункт 2.1
Пункт 2.2

Причем, каждое Подменю должно открываться при активации родителя и закрываться при клике на родителе.При этом, родительский пункт меню - это ссылка на материал (во всех аккордион-меню родительский пункт меню - просто разделитель).

Чтобы решить эту задачу я написал такой скрипт:
В хедере
<script>
function collapsElementMenu() {
alert ('achtung');
if ( document.getElementById('current').getElementsByTa gName('ul').style.display != "none" ) {
document.getElementById('current').getElementsByTa gName('ul').style.display = 'none';
}
else {
document.getElementById('current').getElementsByTa gName('ul').style.display = '';
}
}
</script>

Само меню
<div id="left_menu">
<ul class="menu" id="leftMenu">
<li class="parent item5"><a href="ссылка на материал" onclick="collapsElementMenu()">
<span>Пункт 1</span>
</a>
<ul>
<li class="item8">
<a href="ссылка на материал подпункта" onclick="collapsElementMenu()">
<span>Подпункт 1</span>
</a>
</li>
<li class="item9">
<a href="ссылка на материал подпункта" onclick="collapsElementMenu()">
<span>Подпункт 2</span></a>
</li>
</ul>
</ul>

Стиль подменю
#left_menu ul li ul {
display: none;
}

Этот скрипт не работает, и причину этого я не понимаю.
Буду благодарен за любую помощь!

ksa 17.11.2011 09:36

Цитата:

Сообщение от X-Master
Подменю должно открываться при активации родителя

Это как понять? Что есть "активация"?

P.S.
"Пример" твой полный капец... Много тегов просто нехватает... :-E

ksa 17.11.2011 09:47

Вот вариант открытия/закрытия подменю по клику на ссылке...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#leftMenu > li > ul {
	display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
	$('#leftMenu > li > a').click(function(){
		$(this).next('ul').toggle()
	});
});
</script>
</head>
<body>
<div id="left_menu">
	<ul class="menu" id="leftMenu">
		<li class="parent item5">
			<a href="#">
				<span>Пункт 1</span>
			</a>
			<ul>
				<li class="item8">
					<a href="#">
						<span>Подпункт 1</span>
					</a>
				</li>
				<li class="item9">
					<a href="#">
						<span>Подпункт 2</span>
					</a>
				</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

X-Master 17.11.2011 20:28

ksa, это отличный скрипт, но при работе с ним у меня возникла такая проблема: в примере, который ты привел, ссылки указаны как "#", а на сайте - рабочие ссылки на материалы сайта. И когда я жму на родительский элемент, подменю на полсекунды отображается, а потом - снова пропадает :cray:
Я думаю, это связано с тем, что происходит переход по ссылке, страница перезагружается, значение display слетает на исходное. Может быть, здесь нужно использовать cookie, либо можно решить это по другому?

ksa 18.11.2011 08:33

Цитата:

Сообщение от X-Master
Я думаю, это связано с тем, что происходит переход по ссылке, страница перезагружается

Разумеется... :yes:
Цитата:

Сообщение от X-Master
значение display слетает на исходное. Может быть, здесь нужно использовать cookie, либо можно решить это по другому?

Есть много способов как ободрать кошку... (с)

Серверные скрипты самое лучшее решение этого вопроса.


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