修复了另一个slideToggle（Jquery）内表格行中的slideToggle

Question

当我尝试使用 jQuery 在表格行中的另一个 slideToggle 中使用 slideToggle 时遇到问题。

它可以工作，但是当我关闭子slideToggle 时，它开始出现在父slideToggle 中。

这里有一个example 来理解。

1. 打开第一个slideToggle
2. 关闭刚刚出现的3个slideToggle
3. 关闭第一个slideToggle

然后看：3 个封闭的slideToggles 出现在这里？

我真的需要你的帮助...！

示例代码：

$(document).ready(function() {
    $('.header1').nextUntil('.header1').slideToggle(100, function(){
    });

    $('.rowClic1').click(function(){
        $(this).parent().nextUntil('tr.header1').slideToggle(100, function(){
        });
    });

    $('.rowClic2').click(function(){
        $(this).parent().nextUntil('tr.header2').slideToggle(100, function(){
        });
    });
});

.tH {
    background-color : #fbc112;
}

.tB {
    background-color : #976eb3;
}

.tC {
    background-color : #c7d6de;
}

.tD {
    background-color : #96a4ac;
}

.rowClic1, .rowClic2 {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
      <thead>
          <tr class="tH">
              <th>HEAD A</th>
              <th>HEAD B</th>
          </tr>
      </thead>
      <tbody>
          <!-- 1 -->
          <tr class="tB header1">
              <td class=" rowClic1">Clic here to open first Row </td>
              <td></td>
          </tr>
          <!-- 1.1 -->
          <tr class="tD header2">
              <td class="rowClic2">Clic here to close/open second Row </td>
              <td></td>
          </tr>
          <tr class="tD">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
          <!-- 1.2 -->
          <tr class="tC header2">
              <td class="rowClic2"> Clic here to close/open second Row </td>
              <td></td>
          </tr>
          <tr class="tC">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
          <!-- 1.3 -->
          <tr class="tD header2">
              <td class="rowClic2">CClic here to close/open second Row </td>
              <td></td>
          </tr>
           <tr class="tD">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
      </tbody>
</table>

Answer 1

只要确保在你.slideToggle()父级之后，.hide()父级.slideToggle()回调中的所有子级：

$(document).ready(function() {
    $('.header1').nextUntil('.header1').slideToggle(100);

    $('.rowClic1').click(function(){
        //This is what we're going to toggle:
        var togglable = $(this).parent().nextUntil('tr.header1');
        //Toggle togglable:
        togglable.slideToggle(100, function() {
            //Close all of the child slideToggles after toggling the parent:
            $(".rowClic2").each(function() {
                $(this).parent().nextUntil('tr.header2').hide();
            });
        });
    });

    $('.rowClic2').click(function(){
        $(this).parent().nextUntil('tr.header2').slideToggle(100);
    });
});

.tH {
    background-color : #fbc112;
}

.tB {
    background-color : #976eb3;
}

.tC {
    background-color : #c7d6de;
}

.tD {
    background-color : #96a4ac;
}

.rowClic1, .rowClic2 {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
      <thead>
          <tr class="tH">
              <th>HEAD A</th>
              <th>HEAD B</th>
          </tr>
      </thead>
      <tbody>
          <!-- 1 -->
          <tr class="tB header1">
              <td class=" rowClic1">Clic here to open first Row </td>
              <td></td>
          </tr>
          <!-- 1.1 -->
          <tr class="tD header2">
              <td class="rowClic2">Clic here to close/open second Row </td>
              <td></td>
          </tr>
          <tr class="tD">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
          <!-- 1.2 -->
          <tr class="tC header2">
              <td class="rowClic2"> Clic here to close/open second Row </td>
              <td></td>
          </tr>
          <tr class="tC">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
          <!-- 1.3 -->
          <tr class="tD header2">
              <td class="rowClic2">CClic here to close/open second Row </td>
              <td></td>
          </tr>
           <tr class="tD">
              <td></td>
              <td>stay open in header1 when header2 is close :( </td>
          </tr>
      </tbody>
</table>

Answer 2

所以在 Noble Mushtak 的大力帮助下，我找到了解决方案。

解决方案： 这只是我的选择器。这是错误的，因为当我切换父母时，他们也会切换孩子，反之亦然：$(this).parent().nextUntil(...

所以我在我的表中创建了多个<tbody>s。父级切换<tbody>s，子级继续切换行。

对不起我的英语，固定代码是here。

再次感谢您抽出宝贵时间，Noble Mushtak！

代码：

$(document).ready(function() {
    /* Close all toggle */
    $('.header2').nextUntil('.header2').slideToggle(100);
    $('.bdBody').slideToggle(100);

    $('.rowClic1').click(function(){
        $(this).parent().parent().next('.bdBody').slideToggle(100);
    });

    $('.rowClic2').click(function(){
        $(this).parent().nextUntil('tr.header2').slideToggle(100);
    });
});

.tH {
    background-color : #fbc112;
}

.tB {
    background-color : #976eb3;
}

.tC {
    background-color : #c7d6de;
}

.tD {
    background-color : #96a4ac;
}

.rowClic1, .rowClic2 {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <thead>
        <tr class="tH">
            <th>HEAD A</th>
            <th>HEAD B</th>
        </tr>
    </thead>
    <tbody>
        <!-- 1 -->
        <tr class="tB header1">
            <td class=" rowClic1">Clic here to close/open first Row</td>
            <td></td>
        </tr>
    </tbody>
    <tbody class="bdBody">
        <!-- 1.1 -->
        <tr class="tD header2">
            <td class="rowClic2">Clic here to open children Row </td>
            <td></td>
        </tr>
        <tr class="tD">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
        <!-- 1.2 -->
        <tr class="tC header2">
            <td class="rowClic2"> Clic here to open children Row</td>
            <td></td>
        </tr>
        <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
        <!-- 1.3 -->
        <tr class="tD header2">
            <td class="rowClic2">Clic here to open children Row</td>
            <td></td>
        </tr>
         <tr class="tD">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
    </tbody>

     <tbody>
        <!-- 2 -->
        <tr class="tB header1">
            <td class=" rowClic1">Clic here to open first Row </td>
            <td></td>
        </tr>
    </tbody>
    <tbody class="bdBody">
        <!-- 2.1 -->
        <tr class="tD header2">
            <td class="rowClic2">Clic here to open children Row</td>
            <td></td>
        </tr>
        <tr class="tD">
            <td></td>
            <td>data</td>
        </tr>
        <!-- 2.2 -->
        <tr class="tC header2">
            <td class="rowClic2">Clic here to open children Row</td>
            <td></td>
        </tr>
        <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
        <!-- 2.3 -->
        <tr class="tD header2">
            <td class="rowClic2">Clic here to open children Row</td>
            <td></td>
        </tr>
         <tr class="tD">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
         <tr class="tC">
            <td></td>
            <td>data</td>
        </tr>
    </tbody>
</table>