Why jQuery layered menu jumps?

Question

JavaScript

Help, please, to understand.
Created a multi-level accordion menu, but it does not work correctly (the submenu jumps).
I can't figure out what's wrong.

<ul class="i01 level_1 accordion">
        <li class="nav_btn"><a>1111111111111</a></li>
        <ul class="i01 level_2">
            <li class="nav_btn"><a>2222222222222</a></li>
            <ul class="i01 level_3">
                <li class="nav_btn"><a>3333333333333333</a></li>
                <ul class="i01 level_4">
                    <li class="nav_btn"><a>4444444444444444</a></li>
                    <li class="nav_btn"><a>4444444444444444</a></li>
                    <li class="nav_btn"><a>4444444444444444</a></li>
                </ul>
            </ul>
        </ul>
    </ul>

$(function() {
    $('.i01.level_1 li').click(function() {
        $(this).next('ul').slideToggle().siblings('ul.level_2').slideUp();
    });
    $('.i01.level_2 li').click(function() {
        $(this).next('ul').slideToggle().siblings('ul.level_3').slideUp();
    });
    $('.i01.level_3 li').click(function() {
        $(this).next('ul').slideToggle().siblings('ul.level_4').slideUp();
    });
});

Answer 1

$('.i01.level_1 li')already hangs a handler on all nested menu items. So when you click on the second level of the menu, handlers $('.i01.level_1 li')and $('.i01.level_2 li')and $(this).next('ul').slideToggle()work twice.