Bootstrap table 内的手风琴切换并在单击时更改所选行的背景颜色

Question

我有一个 Bootstrap 手风琴 table，只要有人点击该行的任何地方，它就会显示一个隐藏的 table 内容。隐藏的 table 是不同的颜色 (#DDD)。我想要实现的是让实际的行在单击和打开时也改变颜色，并在关闭时变回白色。

我将如何实现？

这是我目前拥有的 HTML 标记：

<table class="table">

<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>

<tbody>

<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div> 
</td>
</tr>

<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div> 
</td>
</tr>

</tbody>
</table>

和 CSS：

.hiddentablerow{
    padding: 0px 0px !important;
    background-color: #DDD;
}

当然还有小提琴：http://jsfiddle.net/kxtk6w4y/

Answer 1

您可以使用 jQuery 为单击的行触发 onClick 以切换隐藏行。

Fiddle

这是我为它创建的片段：

$('.accordion-toggle').click(function() {
    if ( $(this).attr('aria-expanded') == "true" ) {
        $(this).children().css('background-color', '#FFF');
    } else {
        $(this).children().css('background-color', '#DDD');
    }
});

Bootstrap table 内的手风琴切换并在单击时更改所选行的背景颜色

Bootstrap accordion toggle inside a table and changing the background color of the selected row on click

html

javascript

css

jquery

twitter-bootstrap