Question

我尝试使用Bootstrap手风琴功能了解更多/更少的内容。我需要至少为每个手风琴项目显示第一段。

当项目折叠时，按钮应显示Read more，何时展开它应显示Read less。

这就是我现在所得到的：Bootply

正如您所看到的那样，第一个项目已展开，按钮应显示为Read less。

我是如何实现这一目标的？提前谢谢。

Answer 1

我在没有使用javascript的情况下写了更多/更少的节目，只是一点点CSS和HTML;

HTML：

<div id="descriptionContent" class="collapse descriptionText">
                <p><!--Your content--></p>
            </div>
            <a href="#descriptionContent" data-toggle="collapse" class="collapsed">
                <span class="text-danger readMore">(read more)</span>
                <span class="text-danger readLess">(read less)</span>
            </a>

CSS：

a .readMore {
    display: none;
}

a .readLess {
    display: inline;
}

a.collapsed .readMore {
    display: inline;
}

a.collapsed .readLess {
    display: none;
}

.descriptionText:not(.in) {
    min-height: 4.25em;
    height: 4.25em;
    display: block;
    overflow: hidden;
}

Answer 2

交换$ this.text（＆＃39;查看更少＆＃39;）;和$ this.text（＆＃39;查看更多＆＃39;）;在你的JS文件中。

编辑：

要添加它 - 在JS文件中交换这两个只会使你的第一个手风琴按钮文本看起来很好。你的第二支手风琴仍然拙劣。此外，似乎您从引导文档中复制粘贴代码（大部分）。如果您点击标题，您会发现您的按钮无法正常更新，因此您也想要查看它。您的按钮也只是切换面板，而不是像手风琴一样实际运作（即，打开一个面板将关闭另一个打开的面板）。如果＆＃39;显示更多/更少＆＃39;按钮不是非常必要的，我只需要倾倒那些按钮并坚持点击标题打开不同的面板。

Bootstrap手风琴阅读更多/更少

2 个答案: