Question

我有来自数据库的文字。我想在页面加载时显示一部分文本（最多为某个字符编号），然后使用Twitter Bootstrap中的“折叠”功能显示文本的其余部分。我不确定如何做到这一点。这就是我到目前为止所做的：

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">See More...</a>
<div id="collapseOne" class="accordion-body collapse"><span class="description_text">{{$artist->description}}</span></div>

这将在点击“查看更多”链接时显示“描述”字段中包含的整个文本。我想要的是在页面加载时显示的文本的一部分，然后在点击看到更多按钮时显示（和切换）其余部分。当显示全文时，将“看到更多”按钮更改为“看得更少”也是很好的。

Answer 1

您可以在刀片代码中运行PHP，所以;

<a class="accordion-toggle" data-toggle="collapse" 
    data-parent="#accordion2" href="#collapseOne">
    {{ substr($artist->description,0,30).'...' }}
</a>

最后的substr参数是要包含的字符数

要更改链接文本，您需要编写一些jquery来捕获show.bs.collapse回调并替换链接的innerhtml。

此Twitter bootstrap 3.0 icon change on collapse类似，但正在更改图标。

如何使用Twitter Bootstrap Collapse显示文本的某些部分，然后显示其余部分

1 个答案: