我的页面上有一个bootstrap手风琴,它可以打开和关闭。
唯一的问题是,当我关闭一个部分时,它不会从glyphicon-minus更改回glyphicon-plus,但它会从默认的glyphicon-plus更改为glyphicon-minus。
<div class="tab-pane fade" id="Audit">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#AuditLicence"><span class="glyphicon glyphicon-plus"></span>Expiry Dates</a>
</div>
</div>
<div id="AuditLicence" class="panel-collapse collapse in">
<div class="panel-body">
<asp:Repeater ID="rptExpiryDates" runat="server" OnItemDataBound="rptExpiryDates_ItemDataBound">
<HeaderTemplate>
<table id="tblExpiryDates" class="table table-striped table-bordered">
<thead>
<tr>
<td>Licence Type</td>
<td>Expiry Date</td>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr id="trExpiryDates" runat="server">
<td>
<%# DataBinder.Eval(Container.DataItem,"LicenceType") %>
</td>
<td>
<asp:Label ID="lblExpiryDate" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"ExpiryDate") %>'></asp:Label>
<%--<%# DataBinder.Eval(Container.DataItem,"ExpiryDate") %>--%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
</div> <%--Panel Body - AuditLicence--%>
</div> <%--Panel collapse - AuditLicence--%>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#DrugsAlcohol"><span class="glyphicon glyphicon-plus"></span>Drugs and Alcohol</a>
</div>
</div>
<div id="DrugsAlcohol" class="panel-collapse collapse">
<div class="panel-body">
<asp:Repeater ID="rptAudit" runat="server">
<HeaderTemplate>
<table class="table table-striped table-bordered">
<tr>
<td>Date Of Incident</td>
<td>Vehicle Registration</td>
<td>Accident Category</td>
<td>Fault</td>
<td>TP Name</td>
<td>Action Required</td>
<td>Action</td>
<td>Comments</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem,"DateOfIncident") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"VehicleRegistration") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"AccidentCategory") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"Fault") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"TPName") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"DisciplinaryActionRequired") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"IncidentAction") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem,"IncidentComments") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div> <%--Panel Body - DA--%>
</div> <%--Panel collapse - DA--%>
</div>
</div> <%--Panel Group--%>
</div> <%--Audit--%>
这是我用来打开和关闭各个部分的代码。第一部分设置open类来显示glyphicon-minus。 show和hide函数工作,当我打开一个标签时它会添加glyphicon-minus类,但由于某种原因,当标签关闭时它不会添加glyphicon-plus类。
<script>
$(document).ready(function () {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function () {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hide.bs.collapse', function () {
$(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
</script>
任何帮助非常感谢
修改
我创建了一个具有相同设置的测试页面,并进行了一些调查。当我检查 a 标记时,它不显示类=&#34;折叠&#34;或者我的代码中的aria-expanded = true / false,但它在测试页面上。
我尝试将代码从测试页面复制到系统页面,但无论我尝试什么,我仍然会遇到同样的问题。