帶引導程序的可擴展div

Question

我有一個問題，由於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>

Answer 1

正如您提到的，您不想使用bootstrap折疊，我建議使用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 。