Форум

Anton Essential · #1 (**permalink**) 23.09.2013, 18:25

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

<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, 20:12

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>

Anton Essential · #3 (**permalink**) 23.09.2013, 21:19

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

Форум

Справочник

Discord чат

Курсы javascript