带引导程序的可扩展 div答案

【问题标题】：Expandable divs with bootstrap带引导程序的可扩展 div
【发布时间】：2018-05-08 06:01:26
【问题描述】：

我有一个问题，由于我的 html 结构，当展开一个 div 时，整行会向下移动。我很难找到解决此问题的方法。我看过这里，但找不到解决方案。任何想法都会很棒。这是我的结构（扩展了 div 1 以显示问题的性质）：

expandable div 1  |  expandable div 2
                  |
                  |  expandable div 4
                  |
expandable div 3  |

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="panel panel-primary">
          expandable div 1
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="panel">
          expandable div 2
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="panel">
          expandable div 3
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="panel">
          expandable div 4
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您希望它如何扩展？您希望展开的 div 与下面的 div 重叠吗？
理想情况下，我希望内容相应地向下移动。如果它在一列中，它不会影响另一列？如果这是有道理的；）
@justanotherrrr 你能补充一下你想要的样子吗？
你知道bootstrap崩溃吗？ getbootstrap.com/docs/4.0/components/collapse
您好，我愿意，但无法使用它们，因为我只能使用一个 html 模板来驱动我的内容，并且引导崩溃依赖于 id？

标签： javascript html css twitter-bootstrap collapse

【解决方案1】：

正如您提到的，您不想使用引导折叠，我建议使用 jQuery 来执行此操作（请参见下面的示例）。

您的HTML：

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content" style="display: none;"padding : 10px;>
        Suprise!
    </div>
</div>

现在是jQuery：

$(".header").click(function () {

    $header = $(this);

    $content = $header.next();

    $content.slideToggle(300, function () {

        $header.text(function () {              
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

这样的事情会起作用。

考虑CSS 的样式显示。

【讨论】：