Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2013, 17:25
Аватар для Anton Essential
Интересующийся
Отправить личное сообщение для Anton Essential Посмотреть профиль Найти все сообщения от Anton Essential
 
Регистрация: 28.05.2013
Сообщений: 14

Многоуровневый аккордеон
Добрый вечер дорогие друзья , пишу вам с очередной просьбой , помочь мне, разобраться с многоуровневым аккордеоном

<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');
    });
});


Короче что то я тут намутил со спанами . ничего не получается .
С уважением Антон
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2013, 19:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,292

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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2013, 20:19
Аватар для Anton Essential
Интересующийся
Отправить личное сообщение для Anton Essential Посмотреть профиль Найти все сообщения от Anton Essential
 
Регистрация: 28.05.2013
Сообщений: 14

Оу оу , нуда , не так как я себе это представлял , спасибо рони
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Связать ползунковый слайдер и аккордеон... All_ex74 Элементы интерфейса 1 31.05.2013 12:20
Слайдер Аккордеон jQuery Heidel jQuery 4 29.08.2012 14:30
Аккордеон (сврачивающийся/разворачивающийся) на jquery andreyua Элементы интерфейса 11 11.03.2012 17:09
аккордеон, раскрытие активного пункта меню Moles jQuery 1 21.11.2011 11:24
меню в стиле аккордеон из таблицы chdn Элементы интерфейса 1 10.11.2011 19:15