Форум

X-Master · #1 (**permalink**) 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 · #2 (**permalink**) 17.11.2011, 09:36

Сообщение от X-Master

Подменю должно открываться при активации родителя

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

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

ksa · #3 (**permalink**) 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 · #4 (**permalink**) 17.11.2011, 20:28

ksa, это отличный скрипт, но при работе с ним у меня возникла такая проблема: в примере, который ты привел, ссылки указаны как "#", а на сайте - рабочие ссылки на материалы сайта. И когда я жму на родительский элемент, подменю на полсекунды отображается, а потом - снова пропадает

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

ksa · #5 (**permalink**) 18.11.2011, 08:33

Сообщение от X-Master

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

Разумеется...

Сообщение от X-Master

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

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

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

Форум

Справочник

Discord чат

Курсы javascript