如何在其他人向下滑动时删除课程

Question

我有一个包含行数的表，其中一些行是隐藏的，只有在单击“显示”按钮时才可见。我的问题是，当另一行向下滑动时，如何从箭头中删除类旋转？这是我的片段：

EXECUTE sp_executesql 'Select TOP 10 * FROM Member where Name = ' + @a

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('rotati')
    var content = $(this).closest("tr").next().find(".content");
    $(".content").not(content).slideUp();
    content.slideToggle();
  });
});

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}
.rotati img {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

Answer 1

＆＃13;

＆＃13;

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $(this).parent().toggleClass('rotati')
    $('.show').not($(this)).parent().removeClass('rotati')
    var content = $(this).closest("tr").next().find(".content");
    $(".content").not(content).slideUp();
    content.slideToggle();
  });
});

＆＃13;

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}
.rotati img {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left.png"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left.png"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
      </td>
    </tr>

  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

添加$('.show').not($(this)).parent().removeClass('rotati')

Answer 2

我猜你可以改变这个：

$(this).parent().toggleClass('rotati')

到此：

$('.parentRow td').removeClass('rotati');
$(this).parent().addClass('rotati');

见下面的演示：

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $('.parentRow td').removeClass('rotati');
    $(this).parent().addClass('rotati');
    var content = $(this).closest("tr").next().find(".content");
    $(".content").not(content).slideUp();
    content.slideToggle();
  });
});

.subRow {
  padding: 0;
  background-color: #CFCFCF;
}
.content {
  background-color: #CFCFCF;
  display: none;
}
.rotati img {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  transition: transform 0.2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
  <caption>Test Table</caption>
  <thead>
    <tr align="center" class="parentRow">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left.png"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content">
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </td>
    </tr>
    <tr class="parentRow">
      <td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left.png"/></a>
      </td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
      <td>test cell</td>
    </tr>
    <tr class="subRow">
      <td colspan="5">
        <div class="content">
          <p>Lorem ipsum dolor sit amet...</p>
        </div>
      </td>
    </tr>

  </tbody>
</table>