带阅读更多/更少的引导手风琴答案

【问题标题】：Bootstrap accordion with Read more/less带阅读更多/更少的引导手风琴
【发布时间】：2016-10-27 20:11:08
【问题描述】：

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

当项目折叠时，按钮应该显示阅读更多，当展开时它应该显示阅读更少。

这是我目前得到的：Bootply

如您所见，第一项已展开，按钮应显示“少读”。

有什么想法可以实现这一目标吗？提前谢谢你。

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

交换 $this.text('See Less');和 $this.text('See More');在你的 JS 文件中。

编辑：

补充一点——在你的 JS 文件中交换这两个只会让你的第一个手风琴按钮文本看起来很好。你的第二部手风琴仍然很糟糕。此外，您似乎确实从引导文档中复制粘贴了代码（大部分）。如果您单击标题，您会看到您的按钮不会正确更新，因此您也需要调查一下。您的按钮也只是切换面板，而不是像手风琴一样实际运行（即，打开一个面板将关闭另一个打开的面板）。如果“显示更多/更少”按钮不是真正需要的，我只会转储这些按钮并坚持单击标题以打开不同的面板。

【讨论】：

感谢您的快速回复，但不幸的是没有奏效。该按钮未显示“少读”。以及如何在折叠项目上显示第一段？
bootply.com/5AmH7yriGB# 忘了说您还必须更改第一个手风琴部分的按钮文本 - 您已将其设置为“显示更多”，并相应地切换它，但第一个面板在第一次访问时打开（因此至少在最初将该按钮设置为 Show Less 应该更有意义）。但是，如果您开始单击第二个面板，您会注意到您的第二个按钮将开始出现不匹配的更多/更少按钮问题。
这很容易解决，方法是为你的第二个按钮+手风琴使用不同的类，并在你的 JS 中创建另一个函数来处理它——但这显然不是很干。可悲的是，我想不出一种方法来解决这个问题，至少，不是纯粹的 JS+HTML。如果您了解一些 Angular，这是一个简单的解决方案。
（对不起 cmets 的垃圾邮件，超过字符数：x）关于在折叠项目上显示第一段，您可以简单地将任何您想要显示的内容放在面板标题 div 中，虽然我不知道这是否是你特别想要的。
感谢您的所有 cmets。关于第一段，我已经考虑过这样做，但网站内容来自数据库，因此该解决方案在这种情况下不起作用。我想知道是否有任何 jquery/javascript 插件可以处理。

【解决方案2】：

我在没有使用 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;
}

【讨论】：