Question

我想制作展开/折叠菜单栏，它应该放在右侧+浮动，当我点击展开按钮时，它应该使用菜单列表展开，使用手风琴。

Answer 1

尝试这个，它可能会满足您的要求

<ul id="demo1" class="nav">


 <li class="active"><a href="#">Developer Tools</a></li>
    <li><a href="#">Download</a>
        <ul>
            <li><a href="#"> Setting Up the ADT Bundle</a></li>
            <li><a href="#">Setting Up an Existing IDE</a>
                <ul>
                    <li><a href="#"> Installing the Eclipse Plugin</a></li>
                    <li><a href="#"> Adding Platforms and Packages</a></li>
                </ul>
            </li>
            <li><a href="#">Android Studio</a>
                <ul>
                    <li><a href="#"> Migrating from Eclipse</a></li>
                    <li><a href="#"> Tips and Tricks</a></li>
                    <li><a href="#"> Using the Layout Editor</a></li>
                    <li><a href="#"> Building Your Project with Gradle</a></li>
                </ul>
            </li>
            <li><a href="#"> Exploring the SDK</a></li>
            <li><a href="#">Download the NDK</a></li>
        </ul>
    </li>
    <li><a href="#">Workflow</a>
        <ul>
            <li><a href="#">Setting Up Virtual Devices</a>
                <ul>
                    <li><a href="#">With AVD Manager</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using the Emulator</a></li>
                </ul>
            </li>
            <li><a href="http://www.google.com">Google</a>
                <ul>
                    <li><a href="#">USB Drivers</a></li>
                </ul>
            </li>
            <li><a href="#">Setting Up Projects</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                    <li><a href="#">Using Code Templates</a></li>
                </ul>
            </li>
            <li><a href="#">Building and Running</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From the Command Line</a></li>
                </ul>
            </li>
            <li><a href="http://www.google.com">Google</a>
                <ul>
                    <li><a href="#"> Fundamentals</a></li>
                    <li><a href="#"> From Eclipse</a></li>
                    <li><a href="#"> What To Test</a></li>
                    <li><a href="#"> Activity Testing Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">Debugging</a>
                <ul>
                    <li><a href="#">From Eclipse with ADT</a></li>
                    <li><a href="#">From Other IDEs</a></li>
                    <li><a href="#">Using the Dev Tools App</a></li>
                </ul>
            </li>
            <li><a href="http://www.google.com">Google</a>
                <ul>
                    <li><a href="#">Preparing for Release</a></li>
                    <li><a href="#">Versioning Your Apps</a></li>
                    <li><a href="#">Signing Your Apps</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Support Library</a>
        <ul>
            <li><a href="#">Features</a></li>
            <li><a href="#">Setup</a></li>
        </ul>
    </li>
    <li><a href="#">Tools Help</a>
        <ul>
            <li><a href="#">adb</a></li>
            <li><a href="#">ADT</a></li>
            <li><a href="#">monkey</a></li>
            <li><a href="#">monkeyrunner</a>
                <ul>
                    <li><a href="#">MonkeyDevice</a></li>
                    <li><a href="#">MonkeyImage</a></li>
                    <li><a href="#">MonkeyRunner</a></li>
                </ul>
            </li>
            <li><a href="#">ProGuard</a></li>
            <li><a href="#">SDK Manager</a></li>
            <li><a href="#">Systrace</a></li>
            <li><a href="#">Tracer for OpenGL ES</a></li>
            <li><a href="#">Traceview</a></li>
            <li><a href="#">uiautomator</a>
                <ul>
                    <li><a href="#">Configurator</a></li>
                    <li><a href="#">IAutomationSupport</a></li>
                    <li><a href="#">UiWatcher</a></li>
                </ul>
            </li>
            <li><a href="#">zipalign</a></li>
        </ul>
    </li>
    <li><a href="#">Revisions</a>
        <ul>
            <li><a href="#"> SDK Tools </a></li>
            <li><a href="#"> ADT Plugin </a></li>
        </ul>
    </li>
    <li><a href="http://www.google.com">Google</a>
        <ul>
            <li><a href="#">ADK 2012 Guide</a></li>
            <li><a href="#">ADK 2011 Guide</a></li>
        </ul>
    </li>
</ul>

<p class="external">
    <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
</p>

$(document).ready(function() {
    // Initialize navgoco with default options
    $("#demo1").navgoco({
        caretHtml: '',
        accordion: false,
        openClass: 'open',
        save: true,
        cookie: {
            name: 'navgoco',
            expires: false,
            path: '/'
        },
        slide: {
            duration: 400,
            easing: 'swing'
        },
        // Add Active class to clicked menu item
        onClickAfter: active_menu_cb,
    });

    $("#collapseAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', false);
    });

    $("#expandAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', true);
    });
});

如何使用accordion进行展开/折叠菜单

1 个答案: