javascript - 如何为jQuery滑动侧边菜单制作子菜单？

Question

有没有办法为滑动侧边菜单制作子菜单？ JS Fiddle demo

    <ul id="nav">
        <li><a href="#">Menu Item 1</a></li>
            <ul id="submenu">
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        <li><a href="#">Menu Item 2</a></li>
    </ul>

Answer 1

Fiddle DEMO

更改标记

添加了ul而不是li，因为ul不能直接包含ul

<div id="menu">
    <ul>
        <li><a href="#">Menu Item 1</a>

            <ul id="submenu"> <!-- added ul instead of li -->
                <li><a href="#">Submenu Item 1</a>

                </li>
                <li><a href="#">Submenu Item 2</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Menu Item 2</a>

        </li>
        <li><a href="#">Menu Item 3</a>

        </li>
    </ul>
</div>
<div id="right">
    <button type="button" id="button">Menu</button>
</div> 

JS

$('#menu li:has("ul")').children('ul').hide(); //hide submenu
$('#button').toggle(
function () {
    $('#right').animate({
        left: 150
    });
},
function () {
    $('#right').animate({
        left: 0
    });
});
$('#menu li:has("ul")').click(function(){ 
    $(this).children('ul').slideToggle(); //toggle submenu
});

引用文献

.slideToggle()

:has()