Question

我有一个使用Bootstrap 3的网页。在这个页面中，我试图显示祖父母，父母和孩子之间的关系。为此，我有可以展开/折叠的表行。我已经设置了Bootply here。我的HTML看起来像这样：

<div id="grandparent" class="list-group-item">
    <div data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

当祖父母或父母被扩展时，我试图更改＆＃34;＆gt;＆＃34;的相关图标。到＆＃34; v＆＃34;。但是，这不起作用。我不明白为什么。任何帮助表示赞赏。

Answer 1

你可以通过添加两件事来做你想做的事情：

每次点击祖父母或父母时切换的collapsed类，表示它是展开还是折叠。
添加CSS，以便在collapsed课程处于有效状态时显示＆＃34;＆gt;＆＃34;当它不活动时（它被展开）它会显示一个＆＃34; v＆＃34;。

Updated Bootply Here

您的主要问题是您的父行缺少data-target，而且您只是使用jQuery更改了祖父母图标。

关键jQuery

$('[data-toggle="collapse"]').on('click', function() {
  $(this).toggleClass('collapsed');
});

关键CSS

.collapsed .icon-class:before {
    content: '>';
}
.icon-class:before {
    content: 'v';
}

Answer 2

这是一个固定版本，根据自己的喜好更改代码。

http://www.bootply.com/sCCEzKCLsI#

但基本上是 show.bs.collapse和hide.bs.collapse事件是从.collapse而不是data-toggle="collapse"元素触发的。

Answer 3

另外，要添加到WilomGfx's answer，您需要将data-target分配给表格行。

预览here

HTML

<div id="grandparent" class="list-group-item">
    <div id="expander" data-toggle="collapse" data-target="#grandparentContent" data-role="expander" data-group-id="grandparent">
        <ul class="list-inline">
            <li id="grandparentIcon">&gt;</li>
            <li>Grandparent</li>
        </ul>
    </div>

    <div class="collapse" id="grandparentContent" aria-expanded="true">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Created On</th>
            <th>Last Modified</th>
          </tr>
        </thead>

        <tbody>
          <tr data-toggle="collapse" data-target="#childOne">
            <td><div>&gt;</div></td>
            <td>Parent 1</td>
            <td>04/02/2017</td>
            <td>04/04/2017</td>
          </tr>

          <tr class="collapse" id="childOne">
            <td></td>
            <td>Child A</td>
            <td>04/01/2017</td>
            <td>04/05/2017</td>
          </tr>

          <tr class="collapse">
            <td></td>
            <td>Child B</td>
            <td>04/03/2017</td>
            <td>04/04/2017</td>
          </tr>          

          <tr data-toggle="collapse" data-target="#childTwo">
            <td><div>&gt;</div></td>
            <td>Parent 2</td>
            <td>04/03/2017</td>
            <td>04/10/2017</td>
          </tr>

          <tr class="collapse" id="childTwo">
            <td></td>
            <td>Child X</td>
            <td>04/10/2017</td>
            <td>04/11/2017</td>
          </tr>          
        </tbody>
      </table>
    </div>
</div>

脚本

$('.collapse').on('show.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#grandparentIcon').html('v');
  }
});

$('.collapse').on('hide.bs.collapse', function () {
  var groupId = $('#expander').attr('data-group-id');
  console.log(groupId);
  if (groupId) {
    $('#' + groupId + 'Icon').html('>');
  }
});

Bootstrap 3 - 扩展折叠嵌套表行

3 个答案: