我有一个可以在单击直角插入号时可折叠的表>，所以我希望在行上执行折叠可点击的操作，而不是仅单击角度。
其次，我希望在同一单击上将表格颜色更改为＃E1E2E2。
该表是使用Bootstrap类创建的。
我需要一些绝望的帮助。有人可以帮忙吗？
$(document).on("click",".option-tab",function(){
if($(this).children().hasClass("fa-angle-right")){
$(this).children().removeClass("fa-angle-right");
$(this).children().addClass("fa-angle-down");
}
else
{
$(this).children().removeClass("fa-angle-down");
$(this).children().addClass("fa-angle-right");
}
});.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
} <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table">
<td>
<a href="#" class="right-angle option-tab" data-toggle="collapse" data-target="#AccountDetails"><i class="fas fa-angle-right"></i></a>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->
答案 0 :(得分：1)
我希望对整个表格执行可折叠的可点击操作，而不是仅对角度进行操作...
其次，我希望将行颜色更改为＃E1E2E2
从包裹角度图标的锚点中移动data-toggle="collapse" data-target="#AccountDetails"到tr ...因此，tr将使用Bootstrap内置功能切换隐藏行。无需其他代码即可执行此操作。
但是，您需要一些代码在左右之间切换角度...并更改行颜色。请参见下面的代码段。
// Whole table click handler
$(document).on("click", ".accounts-table", function(e) {
// Find this row angle
var angle = $(this).find(".option-tab i");
// Find all other angles
var other_angles = $(".option-tab i").not(angle);
// Reset all rows color to white
$(".accounts-table").css({"background-color":"white"});
// Set the "active" color on this row
$(this).css({"background-color": (angle.hasClass("fa-angle-right") ? "#E1E2E2" :"white") });
// Reset all other angles to right
other_angles.removeClass("fa-angle-down").addClass("fa-angle-right");
// Toggle this angle
angle.toggleClass("fa-angle-right fa-angle-down");
});.table td,
.table th {
padding: 0 0.5rem 0 1.25rem !important; /* Changed the padding here */
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover {
background-color: #fafafa;
}
a.right-angle {
color: orange;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails1, .collapse.show">
<td>
<a href="#" class="right-angle option-tab" ><i class="fas fa-angle-right"></i></a>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails1">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails2, .collapse.show">
<td><a href="#" class="right-angle option-tab" ><i class="fas fa-angle-right"></i></a></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 2 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails2">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 3 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails3, .collapse.show">
<td><a href="#" class="right-angle option-tab" ><i class="fas fa-angle-right"></i></a></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 3 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails3">
<p>Hello World</p>
</div>
</td>
</tr>
</tbody>
<!-- END OF TABLE BODY -->
</table>
<!-- END OF TABLE -->
我在.collapse.show属性中添加了data-target ...因此它将切换（关闭）任何显示的可折叠行...这就是窍门！
我取消了颜色切换...所以它使颜色一直处于灰色状态。
我还触及了关于行填充的CSS规则...它认为这样更有趣...但这只是一个建议。 ;）
请确保对目标使用唯一的id进行切换。
答案 1 :(得分：0)
如果我理解正确，则在单击该行时也需要进行箭头操作。
toggleClass()代替add/removeClass 示例
$(document).on("click",".option-tab",function(e){ // add (e) for event here
e.stopPropagation(); //<<<<<<<<<<< add this here
$(this).children().toggleClass("fa-angle-down fa-angle-right");
});
$(document).on('click' , 'tr.accounts-table' , function(){
$(this).find('.option-tab').trigger('click'); // find the arrow then trigger the click .. you can also use `.click()` directly instead of `.trigger('click')`
});.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table">
<td>
<a href="#" class="right-angle option-tab" data-toggle="collapse" data-target="#AccountDetails"><i class="fas fa-angle-right"></i></a>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->为所有行设置点击处理程序时，
重要说明
您需要在任何点击事件的每个点击事件上使用e.stopPropagation()
行中的元素，就像我在js代码内的注释中提到的
e.stopPropagation()防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。
但是关于要更改的表颜色，您需要指定要上色的确切部分..表吗？行？所有.account-table行？除了单击的所有行？哪个？
答案 2 :(得分：0)
一个简单的更改就可以解决问题-但是由于您没有单击它，因此您还需要一些jQuery来动画化该图标。
Bootstrap的神奇之处在于它将HTML属性data-toggle="collapse"和data-target="#AccountDetails"与具有这些class / id值的元素进行匹配。
因此，它与此匹配：
data-toggle="collapse" data-target="#AccountDetails"
与此：
<div class="collapse" id="AccountDetails">
您需要做的就是将data-toggle="collapse" data-target="#AccountDetails"添加到您要切换#AccountDetails div折叠的<tr>元素中。
由于现在<a>标记上包含金色V形标记的属性已不再需要，因此我从该标记中删除了这些属性。但是，如果您将它们留在那儿仍然可以使用-但您不再需要它们。
要在单击行（>时，向/向箭头<TR>的V形人字形动画，您可以添加以下jQuery代码。 （这是您已经拥有的代码的补充，当单击金色人字形时，它执行相同的操作）
$(document).on("click","tr",function(){
let chev = $(this).find('td a i');
if (chev.length){
if (chev.hasClass('fa-angle-right')){
chev.removeClass('fa-angle-right').addClass('fa-angle-down');
}else{
chev.removeClass('fa-angle-down').addClass('fa-angle-right');
}
}
});
$(document).on("click","option-tab",function(){
if($(this).children().hasClass("fa-angle-right")){
$(this).children().removeClass("fa-angle-right");
$(this).children().addClass("fa-angle-down");
}
else
{
$(this).children().removeClass("fa-angle-down");
$(this).children().addClass("fa-angle-right");
}
});
$(document).on("click","tr",function(){
let chev = $(this).find('td a i');
if (chev.length){
if (chev.hasClass('fa-angle-right')){
chev.removeClass('fa-angle-right').addClass('fa-angle-down');
}else{
chev.removeClass('fa-angle-down').addClass('fa-angle-right');
}
}
});.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
}<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails">
<td>
<a href="#" class="right-angle option-tab"><i class="fas fa-angle-right"></i></a>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><a href="#" class="fa-user-imp-text"><i class="fas fa-desktop"></i></a></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->