Здравствуйте. Делаю разворачивающийся вложенный список (с jQuery). При нажатии на
span.
expand разворачивается/сворачивается следующий список <ul>, вложенный в этот же <li>. В общем, разметка такая:
<!DOCTYPE html>
<head></head>
<body>
<ul class="jlevel_1">
<li><span class="expand">Cat1</span>
<ul class="jlevel_2 submenu">
<li>Subitem Cat1 Item1</li>
<li>Subitem Cat1 Item2</li>
<li><span class="expand">Subitem Cat1 Item3</span>
<ul class="jlevel_3 submenu">
<li>Subitem Cat1 Item3 subitem1</li>
<li>Subitem Cat1 Item3 subitem1</li>
</ul>
</li>
</ul>
</li>
<li><span class="expand">Cat2</span>
<ul class="jlevel_2 submenu">
<li>Subitem Cat2 Item1</li>
<li>Subitem Cat2 Item2</li>
</ul>
</li>
</ul>
</body>
</html>
JS такой:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("ul.submenu").hide();//Свернули все вложенные списки
jQuery("span.expand").click(function(){
var e = jQuery(this).next();
e.slideToggle("fast");//Сворачиваем/разворачиваем
});
});
</script>
Мне необходимо чтобы при разворачивании одного элемента, тот, который был развернут до этого, свернулся (это касается и списков третьего уровня jlevel_3). Что-то типа эффекта
Accordeon
На самом деле вложенных списков много, и элементов в них тоже.
jQuery ковыряю очень недолго, поэтому need help.