Bootstrap 面板在另一个可折叠面板中折叠带有可折叠面板的不正确图标

Question

我正在尝试使用可折叠面板来显示和隐藏数据，并且还使用字形图标来显示状态。最初在启动时，字形图标未正确显示（错误状态），但我使用 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）中，因此它们仅在按下阅读更多按钮时显示，而在按下阅读更少时隐藏。我为此添加了一些 JS，以便在按下按钮时切换按钮上的文本（从阅读更多到阅读更少）。

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

但是，现在添加此可折叠按钮区域会破坏面板图标状态。它们似乎都受到单击 Read more/Read less 按钮的影响，并且当 collapsing/opening 其中一个面板时它们都受到影响。两个面板区域图标的状态始终彼此相同，即使一个打开一个关闭。

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

有没有人知道我如何才能完成这项工作？

谢谢！

Answer 1

我已将 .collapse 替换为 .panel-collapse 以修复图标状态，并通过覆盖 text() 函数更改了替换文本的方式（多读/少读） return 在按钮的 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

Bootstrap 面板在另一个可折叠面板中折叠带有可折叠面板的不正确图标

Bootstrap panel collapse incorrect icons with collabsible panel in another collapsible panel

html

twitter-bootstrap-3

panel

collapse

glyphicons