我正在尝试使用可折叠面板来显示和隐藏数据，同时也在使用字形图标来显示状态。最初启动时字形图标显示不正确（错误状态），但我发现使用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是否正常工作（即图标在启动时以及最小化和最大化各个可折叠面板时显示正确的状态）
然而，我随后将这两个可折叠面板放入一个简单的可折叠按钮（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。
有人知道我该怎么做吗？
谢谢你！