Bootstrap手风琴打开但不会改变glyphicon

时间:2017-12-12 16:19:09

标签: jquery css twitter-bootstrap-3

我的页面上有一个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,但它在测试页面上。

我尝试将代码从测试页面复制到系统页面,但无论我尝试什么,我仍然会遇到同样的问题。

0 个答案:

没有答案