Многоуровневое вертикальное меню аккордион V2

by Богдан Криворучко

HTML

<ul class="menu">
    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 1</a>
    </li>
    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 2</a>
    </li>
    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 3</a>
    </li>
    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 4</a>

        <ul>
            <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 6</a>

                <ul>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 10</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 11</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 12</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 13</a>
                    </li>
                </ul>
            </li>
            <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 7</a>
            </li>
            <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 8</a>
            </li>
            <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 9</a>

                <ul>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 10</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 11</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 12</a>
                    </li>
                    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 13</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="javascript:void(0)" title="Пункт меню">Пункт меню 5</a>
    </li>
</ul>

CSS

.menu li a {
    text-decoration: none;
    color: black;
}
.menu li a:hover {
    color: #CC0000;
}
ul ul, ul ul ul {
    display:none;
}

JavaScript

$('.menu ul').hide();
$('li').click(function (event) {
    if ($(this).hasClass('open')) {
        $(this).find('ul').slideUp();
        $(this).removeClass('open');
    } else {
        $(this).find('ul:first').slideDown();
        $(this).siblings().removeClass('open').find('ul').slideUp();
        $(this).has('ul').addClass('open');
    }
    event.stopPropagation();
});