我想制作展开/折叠菜单栏,它应放在右侧浮动,当我点击展开按钮时,它应该使用菜单列表展开,使用手风琴 .
尝试这个,它可能会满足您的要求
example
<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); }); });
1 回答
尝试这个,它可能会满足您的要求
example