Динамически разворачивающийся/сворачивающийся список
Здравствуйте. Делаю разворачивающийся вложенный список (с 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. |
UP :(
Мне бы не то чтобы готовый код, просто подсказку, как решить проблему малой кровью, т.е. не изменяя разметки (это важно). |
.submenu {
display: none;
}
.submenu.active {
display: block;
}
$('.expand').click(function() {
$('.jlevel_1').find('.active').removeClass('active');
$(this).next().toggleClass('active');
});
|
SlavaPav,
Все здорово, только при открытии <ul class="jlevel_3"> родительский список сворачивается =( Но я смысл понял, спасибо за ответ |
| Часовой пояс GMT +3, время: 07:04. |