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样式显示。

具有引导程序的可扩展div

1 个答案: