Как модифицировать javascript?

Question

[Александр Тягунов]

Есть вот такое аккордеон меню, продублированное на нескольких страницах:

<ul id="menu">
 <li>
 <li><span><img src='http://www.mtibeton.ru/wp-content/uploads/2015/03/Trubi-jelezobetonnie-rastrubnie2.png' width='20' height='20' margin-top='10px';>ТРУБЫ ЖЕЛЕЗОБЕТОННЫЕ РАСТРУБНЫЕ</span>
    <ul>
     <li><a href="http://www.mtibeton.ru/?p=683">Трубы безнапорные (Т, ТБ, ТБР, ТС, ТПФэ)</a></li>
     <li><a href="http://www.mtibeton.ru/?p=852">Напорные (ТН)</a></li>
     <li><a href="http://www.mtibeton.ru/?p=854">Дорожные усиленные (ТВ)</a></li>
     <li><a href="http://www.mtibeton.ru/?p=860">Блоки портальных и откосных стенок</a></li>
     <li><a href="http://www.mtibeton.ru/?p=862">Лекальные блоки</a></li>
    </ul>
 </li>
 <li><span><img src='http://www.mtibeton.ru/wp-content/uploads/2015/03/zvenja-kruglih-trub.png' width='20' height='20';>ЗВЕНЬЯ КРУГЛЫХ ТРУБ СЕР. 3.501.1-144</span>
    <ul>
        <li><a href="http://www.mtibeton.ru/?p=865">Звенья круглых труб ЗК</a></li>
        <li><a href="http://www.mtibeton.ru/?p=867">Звенья оголовков ЗК (конические)</a></li>
        <li><a href="http://www.mtibeton.ru/?p=869">Блоки портальных и откосных стенок</a></li>
        <li><a href="http://www.mtibeton.ru/?p=871">Лекальные блоки </a></li>
    </ul>
 </li>
<li><span><img src='http://www.mtibeton.ru/wp-content/uploads/2015/03/pliti3.png' width='21' height='21' margin-top='10px';>ПЛИТЫ</span>
    <ul>
        <li><a href="http://www.mtibeton.ru/?p=988">Дорожные плиты</a></li>
        <li><a href="http://www.mtibeton.ru/?p=990">Аэродромные плиты ПАГ</a></li>
        <li><a href="http://www.mtibeton.ru/?p=992">Плиты ПТИ для устройства настила низких платформ</a></li>
    </ul>
 </li>
 <li><span><img src='http://www.mtibeton.ru/wp-content/uploads/2015/03/elementi-blagoustroistva-dorog2.png' width='21' height='21' margin-top='10px';>ЭЛЕМЕНТЫ БЛАГОУСТРОЙСТВА ДОРОГ</span>
    <ul>
        <li><a href="http://www.mtibeton.ru/?p=980">Блоки упора</a></li>
        <li><a href="http://www.mtibeton.ru/?p=982">Плиты укрепления откосов, русел</a></li>
        	<li><a href="http://www.mtibeton.ru/?p=984">Бортовые камни (бордюры)</a></li>
        	<li><a href="http://www.mtibeton.ru/?p=986">Фундаменты под дорожные знаки</a></li>
    </ul>
 </li>
</ul>

Работает на вот таком не хитром скрипте:

$(document).ready(function() {
 $("#menu ul").hide();
 $("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});

Нужно чтобы при переходе на "li", "span" загружался уже раскрытым.
Каким образом необходимо модифицировать код скрипта и самого меню?

Answer 1

[Артём Лучников]

На стороне сервера у активного ul выставлять класс, например
<ul class='active'>
А потом немного модфицировать jQuery код

$(document).ready(function() {
 $("#menu ul").not('.active').hide();
 $("#menu li span").click(function() { $(this).next().slideToggle("normal"); });
});

Comments

[Александр Тягунов]

Большое спасибо за помощь!

Answer 2

[Евгений Петров]

Как-то так (не проверял):

$(function () {
	var menu = $('#menu'),
		active = $('a', menu).filter('[href*="' + location.href + '"]');

	$('ul', menu).hide();
	menu.on('click', 'span', show);

	if (active.length) {
		show.call(active.closest('ul').get(0));
	}

	function show () {
		$(this).next().slideToggle('normal');
	}
});

Однако, есть ряд замечаний:

• Не забывайте про ЧПУ.
  
• Зачем повторять в href протокол и хост?
  
• Раз уж страницы сгруппированы по признакам, в адресе желателен либо раздел, либо параметр, позволяющий идентифицировать эту группу.
  
• Заниматься выставлением состояния элементов меню крайне желательно на сервере.
  
• Зачем прятать блоки, если проще в CSS их скрыть, а показывать нужный?