jquery - 如何制作一个简单的 jQuery 嵌套 ul 列表菜单

Question

我需要一些 jQuery 来导致嵌套的 ul 列表菜单在单击时折叠和展开

<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>

Answer 1

试试这个它会给你真正的折叠展开效果：

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

JSFIDDLE 演示

Answer 2

这个 jQuery 可以解决问题：

$('li a').click(function (e) {
    e.preventDefault();
    var ullist = $(this).parent().children('ul:first');
    ullist.toggle('slow');
    //if(ullist.is(':visible')){
    //    ullist.hide('slow');
    //} else {
    //    ullist.show('slow');
    //}
});

在 jsfiddle 上看到这个链接