Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery: 3 level vertical menu

I've been looking around for a couple of hours for a 3 level vertical accordion menu. Something like this: http://sandbox.scriptiny.com/javascript-accordion/index.html

Something really simple is enough, but i cant get anything to work with 3 levels. Can anyone provide me with a jquery snippet to get me started? I've tried using

 $('li').click(function(){

           $(this).children('ul').children('li').toggle();

        });

but it hides the submenu as well, not just the current childrens. Thanks

like image 820
Johan Avatar asked Feb 21 '26 04:02

Johan


1 Answers

example from scratch:

<ul>
    <li>
        level 2
        <ul>
            <li>a</li>
            <li>b</li>
        </ul>
    </li>
    <li>
        level 2
        <ul>
            <li>
                level 3
                <ul>
                    <li>c</li>
                    <li>d</li>
                </ul>
            </li>

            <li>e</li>
            <li>f</li>
        </ul>
    </li>
</ul>

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});

demo: http://jsfiddle.net/aCaEG/

like image 131
Andy Avatar answered Feb 23 '26 16:02

Andy



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!