jquery를 사용하여 하위 메뉴에서 동적으로 하위 메뉴를 추가하는 방법은 무엇입니까?

jquery를 사용하여 동적으로 다음 menubar 구조체를 생성해야합니다.jquery를 사용하여 하위 메뉴에서 동적으로 하위 메뉴를 추가하는 방법은 무엇입니까?

-Setting 
--System 
---user 
---group 
---acl 
--Vresource 
---vms 
---vnet-conf 
--Configuration 
---template 
---image

내 시스템의 경우 하위 메뉴 {user, group, acl}은 시스템 메뉴 대신 설정됩니다.

내 .js 파일에 작성된 코드가 있습니다.

var li_item = '<li id="li_'+tab_name+'" class="'+tabClass+' '+parent+'"><a href="#">'+tab_info.title+'<span class="icon-caret-left icon-large plusIcon right"></span></a></li>'; 

    //if this is a submenu... div#menu ul#navigation li.vresources-tab 
    if (parent.length) { 
     var children = $('div#menu ul#navigation li.'+parent); 

     //if there are other submenus, insert after last of them 
     if (children.length){ 
      $(children[children.length-1]).after(li_item); 
     }else{ //instert after parent menu 
      $('div#menu ul#navigation li#li_'+parent).after(li_item); 
     } 
    } else { //not a submenu, instert in the end 
     $('div#menu ul#navigation').append(li_item); 
    };

이 코드는 bellow html snippet을 생성합니다.

<div class="menu-navZ"> 
<ul id="navigation" class="tabs vertical"> 
<li id="li_settings-tab" class="topTab tab_with_no_content"> 
<li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;"> 
<li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;"> 
<li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;"> 
<li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: none;"> 
<li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;"> 
<li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;"> 
<li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;"> 
</ul> 
</div>

당신이 여기에서 볼 수 있듯이, 잘못된 방법으로 생성 된 하위 메뉴의 <li> 문,이 시스템에서 와야 마지막 세 문장의 사용자, 그룹 및 ACL과 같은 적절한 메뉴 아래에 와야한다.

예상 출력 :

<div class="menu-navZ"> 
<ul id="navigation" class="tabs vertical"> 
<li id="li_settings-tab" class="topTab tab_with_no_content"> 
<li id="li_system-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_users-tab" class="subTab subsubTab system-tab" style="display: none;"> 
<li id="li_groups-tab" class="subTab subsubTab system-tab" style="display: none;"> 
<li id="li_acls-tab" class="subTab subsubTab system-tab" style="display: none;"> 

<li id="li_vresources-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_vms-tab" class="subTab subsubTab vresources-tab" style="display: none;"> 
<li id="li_vnetconf-tab" class="subTab subsubTab topTab vresources-tab" style="display: 

<li id="li_configuration-tab" class="subTab topTab tab_with_no_content settings-tab" style="display: none;"> 
<li id="li_templates-tab" class="subTab subsubTab configuration-tab" style="display: none;"> 
<li id="li_images-tab" class="subTab subsubTab configuration-tab" style="display: none;"> 
none;"> 
</ul> 
</div>

나에게이 문제를 알아내는 데 도움이 바랍니다.

출처

2013-09-27 Jaydipsinh

메뉴 요소가 올바르게 중첩되어 있지 않은 이유는 <li> 개의 요소를 다른 <li> 요소와 중첩하려고 할 때 코드에 중첩 된 <ul> 요소를 작성하지 않는다는 것입니다. 각 하위 메뉴는 순서가 지정되지 않은 이전 목록에 중첩 된 새 정렬되지 않은 목록이어야합니다.

출처

2013-09-27 15:38:15 tonyrecchia

예 u는 ri8 ..하지만이 문은 동적으로 생성되므로 – Jaydipsinh

jquery를 사용하여 하위 메뉴에서 동적으로 하위 메뉴를 추가하는 방법은 무엇입니까?

답변

관련 문제