HTML / CSS - 自动填充的可折叠元素



我有一堆文本div,它们是使用ngRepeat生成的;它们太大了。

相反,我希望在他们的位置上折叠。但是,我希望从按钮上方的文本中看到 2-3 个句子,其余部分可折叠。

<div>TEXT I WANT VISIBLE</div>
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">TEXT I WANT COLLAPSED</div>

最好的方法是什么?关键是我不想手动选择哪些文本进入可折叠对象,哪些文本不 - 我正在寻找一种自动创建这对元素的方法。

这更像是一个CSS任务,而不是一个AngularJS特定的任务。这个想法是在通过ng-repeat生成的每个div上设置一个类,并切换一些其他类,这些类将使用overflowheightCSS属性独立显示/隐藏该div。

例如,在视图中:

<div ng-repeat="item in items">
<p class="container" ng-class="{'show': item.visible}">{{item.text}}</p>
<button ng-click="item.visible = !item.visible">Show more</button>
</div>

在控制器中:

$scope.items = [
{allShown: false, text: 'long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'},
{allShown: false, text: 'other long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'},
{allShown: false, text: 'another long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows long text that overflows'}
];

以及相关的样式:

.container {
height: 32px;
overflow: hidden;
}
.show {
overflow: visible;
height: auto;
}

下面是一个示例 plunker: https://plnkr.co/edit/23cMOs9gykp094A2sISD

最新更新