Css 当显示另一个div时，按下一系列div

当有人单击一个框时，我尝试这样做：

这似乎很简单，如果我将灰色div放在

ng repeat

中，当用户单击一个框时，就会显示新的div

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

{{朋友}
一些内容

但是，如果我不想重复灰色div呢？（假设它是一堆不需要每个元素重复的

html

）

因此，我有，其中灰色div在ng repeat之外

使用纯CSS或使用angular或javascript的一些技巧，是否有可能实现您在图像中看到的效果

我听说我可以使用jQuery注入html，但可能存在一种更干净的方法

考虑事项：

• 一行可以有一个到

  n

  项

我试过的

• 将灰色div与

  位置相对放置

  ，但这不会向下推其他div

---

首先，除非您更改标记，否则您的任务无法完成。结果应该是这样的

<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>

年龄
年龄
年龄
年龄

为此，您需要使用自定义过滤器。我从这里拿走的

由于使用jQuery，现在可以轻松地操作元素。您可以折叠div并将其附加到每一行

你在这里工作吗

---

也许将这组代码作为指令是正确的方法？没错，但将其放在指令中并不能解决主要问题，这就是避免每个项目重复该指令。您需要将折叠包装成指令。该指令可以从DOM中取出整个部分并将其存储在自身中。然后，您可以通过单击触发它，并让它插入到正确的位置。您需要读取DOM并进行一些计算，以将其插入到正确的位置，但这是完全可能的。嗯，这似乎是一个很好的解决方案，现在我只需计算每行的最后一项。我编辑了plunker并添加了它。现在，您可以看到三角形的不同位置取决于您单击的div。