单击按钮"折叠"后尝试折叠行。但什么也没发生。
我做错了什么?
$(document).ready(function() {
$('.clickme').click(function() {
$(this).nextUntil('tr#test').slideToggle('slow');
});
});
@font-face {
font-family: 'GridGlyphs';
src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff');
}
.mvc-grid {
line-height: 1.25em;
position: relative;
overflow-x: auto;
font-size: 1rem;
}
.mvc-grid table {
border-collapse: collapse;
max-width: 100%;
width: 100%;
}
.mvc-grid th {
background-clip: padding-box;
background-color: #f7f7f7;
position: relative;
}
.mvc-grid th,
.mvc-grid td {
border: 1px solid #dee2e6;
padding: 0.75em;
}
.mvc-grid .filterable {
padding-right: 3.5em;
}
.mvc-grid .sortable,
.mvc-grid .mvc-grid-filter {
cursor: pointer;
}
.mvc-grid .asc::after {
padding-left: 3px;
content: '2193';
}
.mvc-grid .desc::after {
padding-left: 3px;
content: '2191';
}
.mvc-grid-hidden,
.mvc-grid-options {
display: none;
}
.mvc-grid-filter {
background-color: rgba(0, 0, 0, 0.03);
transition: background-color 0.5s;
font-family: 'GridGlyphs';
position: absolute;
font-weight: bold;
width: 2.75em;
border: none;
height: 100%;
right: 0;
top: 0;
}
.mvc-grid-filter:focus,
.mvc-grid-filter:hover {
background-color: rgba(0, 0, 0, 0.06);
color: inherit;
}
.mvc-grid-filter::before {
content: ' 041';
}
.mvc-grid-filter.applied::before {
content: ' 042';
}
.mvc-grid-row-filters .filterable {
padding: 0.25em;
}
.mvc-grid-row-filters th div {
display: flex;
}
.mvc-grid-row-filters .mvc-grid-value {
border: 0.5px solid #aaaaaa;
margin-right: 0.25em;
line-height: normal;
font-weight: bold;
padding: 0 0.2em;
flex: 1;
}
.mvc-grid-row-filters input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-row-filters .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-row-filters .mvc-grid-value::placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-filter {
border: 0.5px solid #aaaaaa;
flex: 0 0 2.125em;
position: static;
height: 2.125em;
}
.mvc-grid-row-filters [readonly] {
background-color: #e4e4e4;
}
.mvc-grid-row-filters.mvc-grid-headers .filterable {
padding: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value {
padding: 0.625em 3.5em 0.625em 0.75em;
background-color: #f7f7f7;
border: none;
margin: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter {
position: absolute;
border: none;
height: 100%;
}
.mvc-grid-popup {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
position: absolute;
min-width: 12em;
font-size: 1rem;
z-index: 1100;
}
.mvc-grid-popup.mvc-grid-guid-filter {
min-width: 20em;
}
.mvc-grid-popup .popup-arrow {
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 8px solid #ffffff;
box-sizing: border-box;
position: absolute;
height: 9px;
top: -8px;
}
.mvc-grid-popup .popup-arrow::after {
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 9px solid #cccccc;
position: absolute;
content: " ";
z-index: -1;
left: -8px;
top: -1px;
}
.mvc-grid-popup .popup-content {
padding: 0.5em;
}
.mvc-grid-popup .popup-group {
padding: 0.2em;
}
.mvc-grid-popup .popup-operator {
text-align: center;
}
.mvc-grid-popup .popup-actions {
padding: 0.4em 0 0.2em;
text-align: center;
}
.mvc-grid-popup .mvc-grid-value,
.mvc-grid-popup .mvc-grid-method,
.mvc-grid-popup .mvc-grid-operator {
border: 1px solid #cccccc;
box-sizing: border-box;
font-size: 0.9em;
padding: 0 0.2em;
height: 2.5em;
width: 100%;
}
.mvc-grid-popup .mvc-grid-operator {
width: auto;
}
.mvc-grid-popup input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-popup .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-popup .mvc-grid-apply,
.mvc-grid-popup .mvc-grid-cancel {
border: 1px solid #ffffff;
padding: 0.25em;
cursor: pointer;
min-width: 4em;
color: #ffffff;
outline: 0;
}
.mvc-grid-popup .mvc-grid-apply {
background-color: #28a745;
border-color: #28a745;
margin-right: 0.3em;
}
.mvc-grid-popup .mvc-grid-apply:focus {
box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5);
}
.mvc-grid-popup .mvc-grid-cancel {
background-color: #dc3545;
border-color: #dc3545;
margin-left: 0.3em;
}
.mvc-grid-popup .mvc-grid-cancel:focus {
box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5);
}
.mvc-grid-pager,
.mvc-grid-empty-row {
text-align: center;
}
.mvc-grid-pager button {
background-color: #ffffff;
border: 1px solid #dddddd;
box-sizing: content-box;
line-height: 2.5em;
padding: 0 0.25em;
cursor: pointer;
margin: 0.5em 0;
min-width: 2em;
color: #337ab7;
}
.mvc-grid-pager button:focus,
.mvc-grid-pager button:hover {
background-color: #f7f7f7;
color: #014c8c;
}
.mvc-grid-pager .active,
.mvc-grid-pager .active:focus,
.mvc-grid-pager .active:hover {
background-color: #0275d8;
border-color: #0275d8;
color: #ffffff;
}
.mvc-grid-pager .disabled,
.mvc-grid-pager .disabled:focus,
.mvc-grid-pager .disabled:hover {
background-color: #efefef;
cursor: not-allowed;
color: #777777;
outline: none;
}
.mvc-grid-page-sizes {
display: inline-block;
margin-left: 0.5em;
}
.mvc-grid-page-sizes select {
border: 1px solid #dddddd;
padding: 0.5em 0;
font: inherit;
}
.mvc-grid-page-sizes input {
border: 1px solid #dddddd;
box-sizing: content-box;
text-align: center;
padding: 0 0.25em;
height: 2.5em;
width: 2.5em;
}
.mvc-grid-loader {
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
transition: opacity 1s;
align-items: center;
position: absolute;
display: flex;
z-index: 100;
height: 100%;
cursor: wait;
width: 100%;
opacity: 0;
left: 0;
top: 0;
}
.mvc-grid-loading {
opacity: 1;
}
.mvc-grid-loading>div>div {
animation: loader-points 1.4s infinite ease-in-out both;
background-color: #f5f5f5;
display: inline-block;
border-radius: 100%;
margin: 0 0.75em;
height: 1.5em;
width: 1.5em;
}
.mvc-grid-loading>div>div:nth-child(1) {
animation-delay: -0.32s;
}
.mvc-grid-loading>div>div:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes loader-points {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr id="test">
<td><button class="clickme">collapse</button></td>
<td>name2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr clss="test">
<td><button class="clickme">collapse</button></td>
<td>name3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
next直到元素的所有后续同级,直到(不包括(指定的元素。
按钮和tr#test
不是同级。BUtton 没有任何兄弟姐妹,所以没有什么可显示的。
因此,您需要首先选择按钮的父级 (tr( 并在该 tr 上使用 nextAll,该 tr 是与tr#test
的兄弟姐妹。此外,正如在另一个答案中指出的那样,不要使用重复的id,而是使用类代替class='test'
我想在"真实"应用程序中,按钮的父tr
和您要隐藏的tr
之间会有更多的兄弟姐妹。
否则,请使用 next()
而不是 nextUntil()
,因为您要隐藏tr
是具有按钮的tr
中最接近的同级
$(document).ready(function() {
$('.clickme').click(function() {
$(this).closest('tr').nextUntil('tr.test').slideToggle('slow');
});
});
@font-face {
font-family: 'GridGlyphs';
src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff');
}
.mvc-grid {
line-height: 1.25em;
position: relative;
overflow-x: auto;
font-size: 1rem;
}
.mvc-grid table {
border-collapse: collapse;
max-width: 100%;
width: 100%;
}
.mvc-grid th {
background-clip: padding-box;
background-color: #f7f7f7;
position: relative;
}
.mvc-grid th,
.mvc-grid td {
border: 1px solid #dee2e6;
padding: 0.75em;
}
.mvc-grid .filterable {
padding-right: 3.5em;
}
.mvc-grid .sortable,
.mvc-grid .mvc-grid-filter {
cursor: pointer;
}
.mvc-grid .asc::after {
padding-left: 3px;
content: '2193';
}
.mvc-grid .desc::after {
padding-left: 3px;
content: '2191';
}
.mvc-grid-hidden,
.mvc-grid-options {
display: none;
}
.mvc-grid-filter {
background-color: rgba(0, 0, 0, 0.03);
transition: background-color 0.5s;
font-family: 'GridGlyphs';
position: absolute;
font-weight: bold;
width: 2.75em;
border: none;
height: 100%;
right: 0;
top: 0;
}
.mvc-grid-filter:focus,
.mvc-grid-filter:hover {
background-color: rgba(0, 0, 0, 0.06);
color: inherit;
}
.mvc-grid-filter::before {
content: ' 041';
}
.mvc-grid-filter.applied::before {
content: ' 042';
}
.mvc-grid-row-filters .filterable {
padding: 0.25em;
}
.mvc-grid-row-filters th div {
display: flex;
}
.mvc-grid-row-filters .mvc-grid-value {
border: 0.5px solid #aaaaaa;
margin-right: 0.25em;
line-height: normal;
font-weight: bold;
padding: 0 0.2em;
flex: 1;
}
.mvc-grid-row-filters input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-row-filters .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-row-filters .mvc-grid-value::placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-filter {
border: 0.5px solid #aaaaaa;
flex: 0 0 2.125em;
position: static;
height: 2.125em;
}
.mvc-grid-row-filters [readonly] {
background-color: #e4e4e4;
}
.mvc-grid-row-filters.mvc-grid-headers .filterable {
padding: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value {
padding: 0.625em 3.5em 0.625em 0.75em;
background-color: #f7f7f7;
border: none;
margin: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter {
position: absolute;
border: none;
height: 100%;
}
.mvc-grid-popup {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
position: absolute;
min-width: 12em;
font-size: 1rem;
z-index: 1100;
}
.mvc-grid-popup.mvc-grid-guid-filter {
min-width: 20em;
}
.mvc-grid-popup .popup-arrow {
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 8px solid #ffffff;
box-sizing: border-box;
position: absolute;
height: 9px;
top: -8px;
}
.mvc-grid-popup .popup-arrow::after {
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 9px solid #cccccc;
position: absolute;
content: " ";
z-index: -1;
left: -8px;
top: -1px;
}
.mvc-grid-popup .popup-content {
padding: 0.5em;
}
.mvc-grid-popup .popup-group {
padding: 0.2em;
}
.mvc-grid-popup .popup-operator {
text-align: center;
}
.mvc-grid-popup .popup-actions {
padding: 0.4em 0 0.2em;
text-align: center;
}
.mvc-grid-popup .mvc-grid-value,
.mvc-grid-popup .mvc-grid-method,
.mvc-grid-popup .mvc-grid-operator {
border: 1px solid #cccccc;
box-sizing: border-box;
font-size: 0.9em;
padding: 0 0.2em;
height: 2.5em;
width: 100%;
}
.mvc-grid-popup .mvc-grid-operator {
width: auto;
}
.mvc-grid-popup input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-popup .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-popup .mvc-grid-apply,
.mvc-grid-popup .mvc-grid-cancel {
border: 1px solid #ffffff;
padding: 0.25em;
cursor: pointer;
min-width: 4em;
color: #ffffff;
outline: 0;
}
.mvc-grid-popup .mvc-grid-apply {
background-color: #28a745;
border-color: #28a745;
margin-right: 0.3em;
}
.mvc-grid-popup .mvc-grid-apply:focus {
box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5);
}
.mvc-grid-popup .mvc-grid-cancel {
background-color: #dc3545;
border-color: #dc3545;
margin-left: 0.3em;
}
.mvc-grid-popup .mvc-grid-cancel:focus {
box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5);
}
.mvc-grid-pager,
.mvc-grid-empty-row {
text-align: center;
}
.mvc-grid-pager button {
background-color: #ffffff;
border: 1px solid #dddddd;
box-sizing: content-box;
line-height: 2.5em;
padding: 0 0.25em;
cursor: pointer;
margin: 0.5em 0;
min-width: 2em;
color: #337ab7;
}
.mvc-grid-pager button:focus,
.mvc-grid-pager button:hover {
background-color: #f7f7f7;
color: #014c8c;
}
.mvc-grid-pager .active,
.mvc-grid-pager .active:focus,
.mvc-grid-pager .active:hover {
background-color: #0275d8;
border-color: #0275d8;
color: #ffffff;
}
.mvc-grid-pager .disabled,
.mvc-grid-pager .disabled:focus,
.mvc-grid-pager .disabled:hover {
background-color: #efefef;
cursor: not-allowed;
color: #777777;
outline: none;
}
.mvc-grid-page-sizes {
display: inline-block;
margin-left: 0.5em;
}
.mvc-grid-page-sizes select {
border: 1px solid #dddddd;
padding: 0.5em 0;
font: inherit;
}
.mvc-grid-page-sizes input {
border: 1px solid #dddddd;
box-sizing: content-box;
text-align: center;
padding: 0 0.25em;
height: 2.5em;
width: 2.5em;
}
.mvc-grid-loader {
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
transition: opacity 1s;
align-items: center;
position: absolute;
display: flex;
z-index: 100;
height: 100%;
cursor: wait;
width: 100%;
opacity: 0;
left: 0;
top: 0;
}
.mvc-grid-loading {
opacity: 1;
}
.mvc-grid-loading>div>div {
animation: loader-points 1.4s infinite ease-in-out both;
background-color: #f5f5f5;
display: inline-block;
border-radius: 100%;
margin: 0 0.75em;
height: 1.5em;
width: 1.5em;
}
.mvc-grid-loading>div>div:nth-child(1) {
animation-delay: -0.32s;
}
.mvc-grid-loading>div>div:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes loader-points {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
.closest('tr')
转到父tr
,然后使用 .next('tr')
选择下一个:
$(this).closest('tr').next('tr').slideToggle('slow');
注意:确保没有重复的 id test
,并改用公共类。
注2:您使用的nextUntil()
也可以使用,但是当不需要时,它会搜索后续元素,next()
方法更快,因为它将直接针对下一个元素。
工作片段:
$(document).ready(function() {
$('.clickme').click(function() {
$(this).closest('tr').next('tr').slideToggle('slow');
});
});
@font-face {
font-family: 'GridGlyphs';
src: url('../MvcGrid/Fonts/GridGlyphs.woff') format('woff');
}
.mvc-grid {
line-height: 1.25em;
position: relative;
overflow-x: auto;
font-size: 1rem;
}
.mvc-grid table {
border-collapse: collapse;
max-width: 100%;
width: 100%;
}
.mvc-grid th {
background-clip: padding-box;
background-color: #f7f7f7;
position: relative;
}
.mvc-grid th,
.mvc-grid td {
border: 1px solid #dee2e6;
padding: 0.75em;
}
.mvc-grid .filterable {
padding-right: 3.5em;
}
.mvc-grid .sortable,
.mvc-grid .mvc-grid-filter {
cursor: pointer;
}
.mvc-grid .asc::after {
padding-left: 3px;
content: '2193';
}
.mvc-grid .desc::after {
padding-left: 3px;
content: '2191';
}
.mvc-grid-hidden,
.mvc-grid-options {
display: none;
}
.mvc-grid-filter {
background-color: rgba(0, 0, 0, 0.03);
transition: background-color 0.5s;
font-family: 'GridGlyphs';
position: absolute;
font-weight: bold;
width: 2.75em;
border: none;
height: 100%;
right: 0;
top: 0;
}
.mvc-grid-filter:focus,
.mvc-grid-filter:hover {
background-color: rgba(0, 0, 0, 0.06);
color: inherit;
}
.mvc-grid-filter::before {
content: ' 041';
}
.mvc-grid-filter.applied::before {
content: ' 042';
}
.mvc-grid-row-filters .filterable {
padding: 0.25em;
}
.mvc-grid-row-filters th div {
display: flex;
}
.mvc-grid-row-filters .mvc-grid-value {
border: 0.5px solid #aaaaaa;
margin-right: 0.25em;
line-height: normal;
font-weight: bold;
padding: 0 0.2em;
flex: 1;
}
.mvc-grid-row-filters input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-row-filters .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-row-filters .mvc-grid-value::placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-value:-ms-input-placeholder {
color: #bbbbbb;
}
.mvc-grid-row-filters .mvc-grid-filter {
border: 0.5px solid #aaaaaa;
flex: 0 0 2.125em;
position: static;
height: 2.125em;
}
.mvc-grid-row-filters [readonly] {
background-color: #e4e4e4;
}
.mvc-grid-row-filters.mvc-grid-headers .filterable {
padding: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-value {
padding: 0.625em 3.5em 0.625em 0.75em;
background-color: #f7f7f7;
border: none;
margin: 0;
}
.mvc-grid-row-filters.mvc-grid-headers .mvc-grid-filter {
position: absolute;
border: none;
height: 100%;
}
.mvc-grid-popup {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
background-clip: padding-box;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
position: absolute;
min-width: 12em;
font-size: 1rem;
z-index: 1100;
}
.mvc-grid-popup.mvc-grid-guid-filter {
min-width: 20em;
}
.mvc-grid-popup .popup-arrow {
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 8px solid #ffffff;
box-sizing: border-box;
position: absolute;
height: 9px;
top: -8px;
}
.mvc-grid-popup .popup-arrow::after {
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 9px solid #cccccc;
position: absolute;
content: " ";
z-index: -1;
left: -8px;
top: -1px;
}
.mvc-grid-popup .popup-content {
padding: 0.5em;
}
.mvc-grid-popup .popup-group {
padding: 0.2em;
}
.mvc-grid-popup .popup-operator {
text-align: center;
}
.mvc-grid-popup .popup-actions {
padding: 0.4em 0 0.2em;
text-align: center;
}
.mvc-grid-popup .mvc-grid-value,
.mvc-grid-popup .mvc-grid-method,
.mvc-grid-popup .mvc-grid-operator {
border: 1px solid #cccccc;
box-sizing: border-box;
font-size: 0.9em;
padding: 0 0.2em;
height: 2.5em;
width: 100%;
}
.mvc-grid-popup .mvc-grid-operator {
width: auto;
}
.mvc-grid-popup input.mvc-grid-value {
padding: 0 0.5em;
}
.mvc-grid-popup .mvc-grid-value.invalid {
outline-color: #dc3545;
}
.mvc-grid-popup .mvc-grid-apply,
.mvc-grid-popup .mvc-grid-cancel {
border: 1px solid #ffffff;
padding: 0.25em;
cursor: pointer;
min-width: 4em;
color: #ffffff;
outline: 0;
}
.mvc-grid-popup .mvc-grid-apply {
background-color: #28a745;
border-color: #28a745;
margin-right: 0.3em;
}
.mvc-grid-popup .mvc-grid-apply:focus {
box-shadow: 0 0 0 0.2em rgba(40, 167, 69, 0.5);
}
.mvc-grid-popup .mvc-grid-cancel {
background-color: #dc3545;
border-color: #dc3545;
margin-left: 0.3em;
}
.mvc-grid-popup .mvc-grid-cancel:focus {
box-shadow: 0 0 0 0.2em rgba(220, 53, 69, 0.5);
}
.mvc-grid-pager,
.mvc-grid-empty-row {
text-align: center;
}
.mvc-grid-pager button {
background-color: #ffffff;
border: 1px solid #dddddd;
box-sizing: content-box;
line-height: 2.5em;
padding: 0 0.25em;
cursor: pointer;
margin: 0.5em 0;
min-width: 2em;
color: #337ab7;
}
.mvc-grid-pager button:focus,
.mvc-grid-pager button:hover {
background-color: #f7f7f7;
color: #014c8c;
}
.mvc-grid-pager .active,
.mvc-grid-pager .active:focus,
.mvc-grid-pager .active:hover {
background-color: #0275d8;
border-color: #0275d8;
color: #ffffff;
}
.mvc-grid-pager .disabled,
.mvc-grid-pager .disabled:focus,
.mvc-grid-pager .disabled:hover {
background-color: #efefef;
cursor: not-allowed;
color: #777777;
outline: none;
}
.mvc-grid-page-sizes {
display: inline-block;
margin-left: 0.5em;
}
.mvc-grid-page-sizes select {
border: 1px solid #dddddd;
padding: 0.5em 0;
font: inherit;
}
.mvc-grid-page-sizes input {
border: 1px solid #dddddd;
box-sizing: content-box;
text-align: center;
padding: 0 0.25em;
height: 2.5em;
width: 2.5em;
}
.mvc-grid-loader {
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
transition: opacity 1s;
align-items: center;
position: absolute;
display: flex;
z-index: 100;
height: 100%;
cursor: wait;
width: 100%;
opacity: 0;
left: 0;
top: 0;
}
.mvc-grid-loading {
opacity: 1;
}
.mvc-grid-loading>div>div {
animation: loader-points 1.4s infinite ease-in-out both;
background-color: #f5f5f5;
display: inline-block;
border-radius: 100%;
margin: 0 0.75em;
height: 1.5em;
width: 1.5em;
}
.mvc-grid-loading>div>div:nth-child(1) {
animation-delay: -0.32s;
}
.mvc-grid-loading>div>div:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes loader-points {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="test">
<td><button class="clickme">collapse</button></td>
<td>name3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="8" class="parent">
<div class="mvc-grid" data-name="" data-filter-mode="ExcelRow" data-source-url="">
<table>
<thead>
<tr class="mvc-grid-headers ">
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
<th>
<span class="mvc-grid-header-title ">Test1</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>