JQuery 중첩 탭 - 부모 탭 클릭시 첫 번째 자식이 선택되지 않음

Question

중첩 탭을 만들었습니다. 샘플 끝 구조는 다음과 같습니다 : 참고 : ""_1 "은 foreach를 사용하여 동적으로 추가되므로 모든 자식 div는 서버 반환 값을 사용하여 동적으로 생성됩니다."

<div id="tabs"> 

     <ul id="tablinks"> 
     <li><a href="#childtab_1">First Parent</a></li> 
     <li><a href="#childtab_2">Second Parent</a></li> 
     </ul> 


    <div id="childtab_1"> 
     <div id="ct_1"> 
     <ul id="childTabLinks_1"> 
     <li><a href="#childtabs-11">First Nested Tab</a></li> 
     <li><a href="#childtabs-12">Second Nested Tab</a></li> 
     </ul> 
     <div id="childtabs-11"><p>First child content</p> 
     </div> 
     <div id="childtabs-12"><p>Second child content</p> 
     </div> 
    </div> 

    <div id="childtab_2"> 
    . 
    . 
    </div> 

    In Java Script: 
    $('#tabs').tabs(); 
    $('#childtabs_1').tabs(
    //getting data using ajaxOptions 
    ); 
    $('#childtabs_2').tabs(
    //getting data using ajaxOptions 
    ); 

상위 1 - 2 번째 하위가 클릭 된 것으로 간주하십시오. 부모 2를 클릭 한 다음 부모 1로 돌아 오면 두 번째 자식이 여전히 선택됩니다. 부모 탭을 클릭 할 때마다 첫 번째 자식을 선택해야합니다.

나는 다른 게시물을 읽어 - 그리고 앵커 요소에

1. 클릭 기능을 사용했습니다. like

   $('#tabs ul li a').click(function(){ 
       var parent = $('#tabs').tabs(); 
       $parent.tabs('select',0); 
   }); 
   

   해당 기능이 작동하지 않습니다.

2. Tabselect에서 바인드를 사용하여 시도했습니다. 그것의 원인이 이벤트 버블 및 또한 작동하지 않습니다.

   $('#tabs').bind(
        'tabsselect', 
        function(event, ui) { 
         $("#tabLinks li a").on("click", function() { 
          $('#childTabLinks_0 li a').first().trigger("click"); 
         });  
        } 
   ); 
   

부모가 선택 될 때마다 자동으로 선택한 첫 번째 아이를 가질 수있는 솔루션이 있다면 알려 주시면 감사하겠습니다.

Answer 1

당신은 tabselect 기능 내부의 클릭 기능이 필요하지 않을 :

$('#tabs').bind(
    'tabsselect', 
     function() { 
      $(this).children('.child-tabs').tabs('select',0); 
     } 
    } 
); 

<div id="childtab_1"> 
    <div id="ct_1"> 
     <ul id="childTabLinks_1" class="child-tabs"> 
     ...