Многоуровневый аккордеон
Добрый вечер дорогие друзья , пишу вам с очередной просьбой , помочь мне, разобраться с многоуровневым аккордеоном
<div class='some-class'>
<ul id='accordion'>
<li>
<p>Нажмите тут</p>
<span class='plus'></span>
<span class='minus'></span>
<ul class='sub-menu'>
<li>
<p>Нажмите тут</p>
<span class='plus'></span>
<span class='minus'></span>
<ul class='sub-menu-2'>
<li></li>
<ul>
</li>
</ul>
</li>
</ul>
</div>
так же у меня в хтмл разметке присутствуют спаны, один с плюсиком , второй с минусом , и имееться класс эктив с другим цветом текста. так вот,я никак не могу сделать так, что бы при клике добавлялся класс к тому списку на который был осуществлен клик и также спан с плюсиком менялся на минус . что бы подчеркнуть открытый пункт
$(document).ready(function(){
$('#accordion > li ul').click(function(event){
event.stopPropagation();
})
.filter(':not(:first)').hide();
$('#accordion > li, #accordion > li > ul > li').click(function(){
var selfClick = $(this).find('ul:first').is(':visible');
if(!selfClick) {
$(this).parent().find('> li ul:visible').slideToggle();
$(this).find(".minus").fadeToggle('fast');
};
$(this).find('ul:first').stop(true, true).slideToggle();
$(this).find(".plus").fadeToggle('fast');
});
});
Короче что то я тут намутил со спанами . ничего не получается . С уважением Антон |
Anton Essential,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.minus, .sub-menu {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$('ul li').on('click',function(event) {
event.stopPropagation();
var elements = $('ul:first, .plus:first, .minus:first', $(this));
elements.toggle()
});
});
</script>
</head>
<body>
<div class='some-class'>
<ul id='accordion'>
<li>
<p>Нажмите тут</p>
<span class='plus'>+</span>
<span class='minus'>-</span>
<ul class='sub-menu'>
<li>
<p>Нажмите тут</p>
<span class='plus'>+</span>
<span class='minus'>-</span>
<ul class='sub-menu'>
<li>123</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
Оу оу , нуда , не так как я себе это представлял , спасибо рони
|
| Часовой пояс GMT +3, время: 11:16. |