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），这样只有在按下Read less按钮时按下Read more按钮才会显示这些按钮。我为此添加了一些JS，以便在按下按钮时切换按钮上的文本（从Read more to 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');
 });
});

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

请在此处查看更新后的JSFiddle。

有没有人有任何想法如何让这项工作？

谢谢！

Answer 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

Bootstrap面板在另一个可折叠面板中折叠了带有可折叠面板的错误图标

1 个答案: