nested ul list menu to collapse and uncollapse on clicking

nested ul list menu to collapse and uncollapse on clicking of parent ul li it will collapse and uncollapse its childern ul li

HTML

<ul>
    <li><a href "#">Hello World</a>

        <ul>
            <li><a href "#">Hello World</a>

            </li>
            <li><a href "#">Hello World</a>

                <ul>
                    <li><a href "#">Hello World</a>

                    </li>
                    <li><a href "#">Hello World</a>

                    </li>
                </ul>
            </li>
            <li><a href "#">Hello World</a>

            </li>
        </ul>
    </li>
    <li><a href "#">Hello World</a>

    </li>
    <li><a href "#">Hello World</a>

    </li>
    <li><a href "#">Hello World</a>

    </li>
</ul>

CSS

li a {
    cursor:pointer;
    text-decoration:none;
    list-style: none;
}

JavaScript

$('li a').click(function (e) {
    e.preventDefault();
    var ullist = $(this).parent().children('ul:first');
    ullist.slideToggle();
});