<div id="firstDiv">
    <div id="secondDiv">
        <ul id="accordionMenu">
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a>
                <ul>
                    <li><a href="#">suboption 1</a></li>
                    <li><a href="#">suboption 2</a></li>
                </ul>
            </li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
    </div>
</div>


如何使其可扩展?

我有以下JavaScript代码:

$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#accordionMenu > li > a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});

最佳答案

@Yoshi:谢谢。我将在此处添加答案,希望对其他人有帮助

的HTML

<div id="firstDiv">
    <div id="secondDiv">
        <ul id="accordionMenu">
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a>
                <ul>
                    <li><a href="#">suboption 1</a></li>
                    <li><a href="#">suboption 2</a></li>
                </ul>
            </li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
            <li><a href="#">menu item</a></li>
        </ul>
    </div>
</div>


jQuery的:

// Collapse everything but the first menu:
$("#accordionMenu > li > a").not(":first").find("+ ul").slideUp(1);

// Expand or collapse:
$("#accordionMenu > li > a").click(function() {
    $(this).find("+ ul").slideToggle("fast");
});​


不要忘了包括jQuery库:)

关于javascript - jQuery展开式菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11454382/

10-12 12:59
查看更多