向下推了一系列的div时显示另一个div [英] Push down a series of divs when another div is shown

问题描述

我试图做到这一点，当有人点击一个框：

I'm trying to do this when someone clicks a box:

它似乎很简单，如果我把灰格的 NG-重复，当用户点击一个箱子，在新的div会显示内。

It's seems simple, if I put the gray div inside the ng-repeat, when a user clicks a box, the new div would be shown.

<div ng-repeat="friend in friends" ng-click...>
 <div>
   {{friend}}
 </div>
 <div collapse="expand">
  some content
 </div>
</div>

但是，如果我不想重复灰格呢？ （比方说，这是一帮 HTML 这是没有必要要由每个元素重复）。

But, what if I don't want to repeat the gray div? (Let's say it's a bunch of html that is not necessary to be repeat by each element).

所以，我有 这plunker ，这里的灰格是NG重复之外。

So, I have this plunker, where the gray div is outside the ng-repeat.

这是任何可能性，做你的纯CSS 或某些角度或JavaScript把戏？

Is it any possibility to do what you see in the image with pure CSS or some trick in angular or javascript?

我听说，我可以使用jQuery注入HTML，但也许可能存在一个更清洁的方式。

I heard that I could use jQuery to inject the html, but maybe could exist a cleaner way.

注意事项：

• 一个行可能会有一到 N 项目。

• A row could have one to n items.

我曾尝试

• 将与位置相对灰格，但这不会倒推其他的div。

• Put the gray div with position relative, but this would not push down the other divs.

推荐答案

所有的任务首先，除非你改变的标记是无法实现的。结果应该是这样的。

First of all your task is unachievable unless you change markup. The result should be like this.

<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>

对于您需要使用自定义过滤器。我把它从这里
<一href=\"http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap\">how到NG-重复数据与拆分使用引导三列

由于您使用jQuery你可以轻松地操纵现在的元素。你可以让你崩溃的div并将其附加到每一行。

Since you use jQuery you can easily manipulate elements now. You can get you collapse div and append it to every row.

您修改工作拖板就在这里
http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=$p$pview

You modified working planker is here http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview

这篇关于向下推了一系列的div时显示另一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！