Question

在我的代码段中，您可以看到一张只有一行的简单表格。在该行中，您可以看到一个按钮组。现在，如果您单击“主”按钮（复位按钮），您会看到您单击的按钮下面的表格行将会显示。仅在单击表行时才会发生这种情况，而单击表行内的按钮时不会发生这种情况。

还有，为什么要花那么长时间才能恢复崩溃？

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container body-content">
    <table class="table m-0">
      <thead class="thead-light">
        <tr>
          <th>
            <span class="d-inline-block align-middle">table head</span>
            <button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
          <td>
            table content
            <div class="btn-group float-right align-top" onclick=";">
              <button type="button" class="btn btn-warning" onclick="alert('reset!');">reset</button>
              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
              <div class="dropdown-menu bg-danger">
                <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
              </div>
            </div>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
            </div>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      $(window).on('load', function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </div>
</body>

</html>

Answer 1

回答原始问题以及评论中的问题。

单击按钮时，事件冒泡并在row元素上触发，这就是行的单击处理程序（用于切换部分）的原因。为了防止这种情况发生，您可以通过在重置按钮的点击处理程序中调用event.stopPropagation()来阻止click事件冒泡。
decollapse很慢，因为默认情况下，Bootstrap在切换过程中应用类.collapsing。这允许应用一些动画。默认情况下，它似乎只是对元素的高度进行动画处理。但是，在您的情况下，动画无法正常工作，因为表格行的高度不能小于内容高度，但是预期动画的延迟仍然存在。您可以像下面一样通过disable覆盖默认的transition none来div制作动画，或者仅使用表格以外的其他内容，例如.collapsing { -webkit-transition: none !important; transition: none !important; display: none; }。

因此，根据我的评论，这是您代码的更新版本：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container body-content">
    <table class="table m-0">
      <thead class="thead-light">
        <tr>
          <th>
            <span class="d-inline-block align-middle">table head</span>
            <button type="button" class="btn btn-secondary btn-sm float-right">button text</button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
          <td>
            table content
            <div class="btn-group float-right align-top" onclick=";">
              <button type="button" class="btn btn-warning" onclick="alert('reset!');event.stopPropagation();">reset</button>
              <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
              <div class="dropdown-menu bg-danger">
                <a class="dropdown-item bg-danger text-white" onclick="alert('delete!');">delete</a>
              </div>
            </div>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 1">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #1AFF00" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 1</div>
            </div>
            <div class="progress mb-2" data-toggle="tooltip" data-placement="top" title="progress text 2">
              <div class="progress-bar" role="progressbar" style="width: 0%; background-color: #2B00FF" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">progress text 2</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      $(window).on('load', function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </div>
</body>

</html>

{{1}}

单击表行中的按钮时，Bootstrap折叠表行

1 个答案: