jquery - 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，然后返回父 1，则仍然选择第二个孩子。我希望每当单击父选项卡时都应该选择第一个孩子。

我通读了其他帖子-并尝试使用

1. 单击锚元素上的功能。喜欢

   $('#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 函数中的 click 函数：

$('#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">
      ...