아코디언을 사용하여 펼치기/접기 메뉴를 만드는 방법

Question

아코디언을 사용하여 메뉴 목록으로 펼쳐야하는 확장 버튼을 클릭하면 펼치기/접기 메뉴 막대를 오른쪽에 배치해야합니다.

Answer 1

이 하나를 시도,이 귀하의 요구 사항

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); 
    }); 
});