Question

（请原谅我的无知我不是编码员）

这是我的codepen

我遇到了一个项目表的问题，我希望隐藏带描述的div，除非用户点击特定项目的行。

所以我几乎让它按照我想要的方式工作，使用class="collapse" - 但动画并不流畅。

然后我尝试使用class="accordion-toggle" - 现在它很顺利，但是1.我不想把它作为手风琴（我希望用户能够扩展所有描述） - 即使它没有表现像一个，2。它显示下面一行的一部分，我想在行折叠时隐藏。

注意：我修改了默认的bootstrap表，因为我想要没有边框的更高行，通过：

    td {
    height:50px;
    border:none!important;
    vertical-align:middle!important;
}

附加问题： 我也希望将表条带化，但是我的描述会破坏它，因为它们位于其他所有行中（如何防止这种情况？）

这是我想要实现的目标：

Answer 1

试试这段代码。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Accordion Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

用于条形表

<div class="panel-group">
<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
    <ul class="list-group">
      <li class="list-group-item">One</li>
      <li class="list-group-item">Two</li>
      <li class="list-group-item">Three</li>
    </ul>
    <div class="panel-footer">Footer</div>
  </div>
</div>

Answer 2

使用它可能会对你有帮助。

$(document).ready(function(){
  $('.hiddenRow').css('display','none');
  $('.accordion-toggle').click(function(){
    $('.hiddenRow').toggle();
  })
});

Bootstrap 3 - 平滑展开折叠表格行

2 个答案:

试试这段代码。

用于条形表