手风琴代码不起作用

Question

我的代码运行不正常，因为我无法浏览类别或折叠或解开手风琴。该页面仅显示为折叠视图，我无法解开手风琴。

我目前正在使用asp.net的bootstrap 3框架。

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript" >
    $(document).ready(function () {
        $('.collapse').on('show.bs.collapse', function () {
            var id = $(this).attr('id');
            $('a[href="#' + id + '"]').closest('.panel-heading').addClass('active-faq');
            $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-minus"></i>');
        });
        $('.collapse').on('hide.bs.collapse', function () {
            var id = $(this).attr('id');
            $('a[href="#' + id + '"]').closest('.panel-heading').removeClass('active-faq');
            $('a[href="#' + id + '"] .panel-title span').html('<i class="glyphicon glyphicon-plus"></i>');
        });
    });
</script>
<div class="container">
    <div class="row">
        <!--NAV Tabs catagory-->
        <ul class="nav nav-tabs faq-cat-tabs" role="tablist">
            <li class="active"><a href="#faq-cat-1" data-toggle="tab" role="tab"><i class="fa fa-life-saver pr-10"></i> General</a></li>
            <li><a href="#faq-cat-2" data-toggle="tab" role="tab"><i class="fa fa-star pr-10"></i> Popular Topics</a></li>
        </ul>

        <!-- Tab Panels-->
        <div class="tab-content faq-cat-content">
            <div class="tab-pane active in fade" id="faq-cat-1">
                <div class="panel-group" id="accordion-cat-1">
                    <div class="panel panel-default panel-faq">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-1">
                                <h4 class="panel-title">
                                    1. Why should I hire an interior designer?
                                    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                </h4>
                            </a>
                        </div>
                        <div id="faq-cat-1-sub-1" class="panel-collapse panel">
                            <div class="panel-body">
                                A professional interior designer will be able to offer advice and sugguestions based on his expertise to help you create your ideal conceptual design, hassle-free
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-faq">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion-cat-1" href="#faq-cat-1-sub-2">
                                <h4 class="panel-title">
                                    2. What are the procedures involved in the hiring of your interior designers?
                                    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                </h4>
                            </a>
                        </div>
                        <div id="faq-cat-1-sub-2" class="panel-collapse panel">
                            <div class="panel-body">
                                Simply create an account from our website and you are all set to consult the interior designer of your choice to embark on an unforgettable journey with Impression Design Firm.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="faq-cat-2">
                <div class="panel-group" id="accordion-cat-2">
                    <div class="panel panel-default panel-faq">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-1">
                                <h4 class="panel-title">
                                    3. How can I make my payment?
                                    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                </h4>
                            </a>
                        </div>
                        <div id="faq-cat-2-sub-1" class="panel-collapse collapse">
                            <div class="panel-body">
                                Impression Design Firm would only allow cheque payments for the benefit and convenience of both parties for project payments, and credit cards for furniture purchases.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-faq">
                        <div class="panel-heading">
                            <a data-toggle="collapse" data-parent="#accordion-cat-2" href="#faq-cat-2-sub-2">
                                <h4 class="panel-title">
                                    4. Do you provide free delivery?
                                    <span class="pull-right"><i class="glyphicon glyphicon-plus"></i></span>
                                </h4>
                            </a>
                        </div>
                        <div id="faq-cat-2-sub-2" class="panel panel-collapse">
                            <div class="panel-body">
                                Impression Design Firm provides free delivery for any furniture and supplies purchased, which will be sent directly to your doorstep!
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default panel-faq">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>