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

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

1 个答案: