javascript - 修复了另一个 slideToggle (Jquery) 内表行中的 slideToggle

Question

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

它有效，但是当我关闭子 slideToggle 时，它开始出现在父 slideToggle 中。

这是一个 example理解。

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

然后看:3 个关闭的 slideToggle 出现在这里？

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

示例代码在这里:

$(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>