Bootstrap 面板在另一个可折叠面板中使用可折叠面板折叠不正确的图标答案

【问题标题】：Bootstrap panel collapse incorrect icons with collabsible panel in another collapsible panelBootstrap 面板在另一个可折叠面板中使用可折叠面板折叠不正确的图标
【发布时间】：2015-11-25 04:28:16
【问题描述】：

我正在尝试使用可折叠面板来显示和隐藏数据，并且还使用字形图标来显示状态。最初在启动时，字形图标未正确显示（错误状态），但我使用 JS 找到了解决此问题的方法。

$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

查看此JSFiddle 工作正常（即图标在启动时以及最小化和最大化单个可折叠面板时显示正确状态）

但是，我随后将这 2 个可折叠面板放入一个简单的可协作按钮（readmoreless）中，因此这些面板仅在按下 Read more 按钮时显示，而在按下 Read less 时隐藏。我为此添加了一些 JS，以便在按下按钮时切换按钮上的文本（从 Read more 到 Read less）。

$(document).ready(function(){
 $("#readmoreless").on("hide.bs.collapse", function(){
   $(".btn2").html('Read more');
 });
 $("#readmoreless").on("show.bs.collapse", function(){
   $(".btn2").html('Read less');
 });
});

但是，添加此可折叠按钮区域现在会破坏面板图标状态。他们似乎都受到了单击“阅读更多/阅读更少”按钮的影响，并且在折叠/打开其中一个面板时都受到影响。两个面板区域图标的状态始终彼此相同，即使一个可能是打开的，一个可能是关闭的。

在此处查看更新的损坏JSFiddle。

有没有人知道我怎样才能完成这项工作？

谢谢！

【问题讨论】：

标签： html twitter-bootstrap-3 panel collapse glyphicons

【解决方案1】：

我已将.collapse 替换为.panel-collapse 以修复图标状态，并通过覆盖text() 函数中的click() 函数返回来更改替换文本的方式（阅读更多/阅读更少）你的按钮。

这是你应该插入到你的 JS 中的内容

//Change icon states
$('.panel-collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});

//Read more or less
$(document).ready(function () {
    $(".btn2").click(function () {
        $(this).text(function (i, text) {
            return text === "Read more" ? "Read less" : "Read more";
        })
    });
});

JSFiddle

text() - function

【讨论】：