Question

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

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

这里需要了解example。

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

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

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

此处示例代码：

＆＃13;

$(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(){
        });
    });
});

＆＃13;

.tH {
    background-color : #fbc112;
}

.tB {
    background-color : #976eb3;
}

.tC {
    background-color : #c7d6de;
}

.tD {
    background-color : #96a4ac;
}

.rowClic1, .rowClic2 {
    cursor: pointer;
}

＆＃13;

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

＆＃13;

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>

{{1}}

Answer 2

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

解：这只是我的选择器。这是错误的，因为当我切换父母时，他们也会切换孩子，反之亦然：public static void main(String[] args) { int t = new Scanner(System.in).nextInt(); IntStream.rangeClosed(1, t) .mapToObj(n -> String.join("", Collections.nCopies(t - n, " ")) + String.join("", Collections.nCopies(n, "#"))) .forEach(System.out::println); }

所以我在表格中制作了多个$(this).parent().nextUntil(...。父级切换<tbody>，子级继续切换行。

抱歉我的英文和固定代码为here。

再次感谢你的时间，Noble Mushtak !!

代码：

＆＃13;

<tbody>

＆＃13;

$(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);
    });
});

＆＃13;

.tH {
    background-color : #fbc112;
}

.tB {
    background-color : #976eb3;
}

.tC {
    background-color : #c7d6de;
}

.tD {
    background-color : #96a4ac;
}

.rowClic1, .rowClic2 {
    cursor: pointer;
}

＆＃13;

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

2 个答案: