Скрипт для сворачивания меню в Джумле
Столкнулся с такой задачей:
В 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; } Этот скрипт не работает, и причину этого я не понимаю. Буду благодарен за любую помощь! |
Цитата:
P.S. "Пример" твой полный капец... Много тегов просто нехватает... :-E |
Вот вариант открытия/закрытия подменю по клику на ссылке...
<!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> |
ksa, это отличный скрипт, но при работе с ним у меня возникла такая проблема: в примере, который ты привел, ссылки указаны как "#", а на сайте - рабочие ссылки на материалы сайта. И когда я жму на родительский элемент, подменю на полсекунды отображается, а потом - снова пропадает :cray:
Я думаю, это связано с тем, что происходит переход по ссылке, страница перезагружается, значение display слетает на исходное. Может быть, здесь нужно использовать cookie, либо можно решить это по другому? |
Цитата:
Цитата:
Серверные скрипты самое лучшее решение этого вопроса. |
Часовой пояс GMT +3, время: 03:25. |