如何制作jQuery滑動側菜單的子菜單？

Question

有沒有一種方法可以為滑動側菜單創建子菜單？ JS小提琴演示

    <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

小提琴演示

更改標記

添加了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（）

：擁有（）