我有一个包含行数的表格,其中一些行是隐藏的,只有在单击“显示”按钮时才可见。我的问题是当一行向下滑动时如何向上滑动其他行? 这是我的片段:-
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").next().find(".content").slideToggle();
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<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</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</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>
谢谢
最佳答案
在变量中捕获您选择的内容,对其调用 slideToggle()
,然后对每个 other 调用
元素。slideUp()
>.content
更多信息可以看the jQuery docs category for sliding .
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
var selected = $(this).closest("tr").next().find(".content")
selected.slideToggle();
$('.content').not(selected).slideUp()
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<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</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</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>
关于javascript - 如何在另一个 SlideDown 时向上滑动另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41096519/