Bootstrap手风琴不会塌陷

Question

我正在为我的网站开发一个自举式手风琴，但是在Dreamweaver cc中以及当我在浏览器中发布它时，它不起作用。 看起来可以在JSFiddle上使用。 这里是一个链接： JSFiddle

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="row"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#one1" aria-expanded="false" aria-controls="one1" >SHOP LIST</a> </h4> </div> <div id="one1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" > <div class="panel-body"> <table width="903" border="0"> <tbody> <tr style="font-size: 10px"> <td width="293" align="center" valign="top" style="font-size: 10px"> <p1>HOKKAIDO<br>GRAN SAC'S 苫小牧 0144-53-5355</p1><br><br> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> 

我一直在寻找解决方案数小时，但仍然无法弄清楚我的手风琴出了什么问题。

Answer 1

这是示例，请检查您的错误在哪里，但仍然有疑问请发表评论。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <article class="content col-sm-12 col-md-12">
        <p>Some Text </p>
        <br>
        <div class="clearfix"></div>
        <div class="filter-box accordions-filter">
            <div class="panel-group filter-elements" id="accordion">
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                            <i class="fa fa-circle"></i> Text 1
                            </a>
                        </div>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>No worries. Just let us know your preferred time slot. We will call you 1 hour before to know your availability. It is possible to reschedule the call; your time is valuable to us.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                            <i class="fa fa-circle"></i> Text 2
                            </a>
                        </div>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>We are one call away to help you out. Your emergency is our priority.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                            <i class="fa fa-circle"></i>Text 3
                            </a>
                        </div>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Yes. We are working through the week. Your weekends are our peak days as we value your time :)</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                            <i class="fa fa-circle"></i>Text 4
                            </a>
                        </div>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>Any small work of around 30 mins is included in this minimum charge. It also includes an inspection and visit to your place so that Zimmber Champ will understand your requirement and will offer best available solution to suit your budget requirement. These visiting charges will be waived off, if you avail of our services. But minimum charges will be applicable in case of no show.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                            <i class="fa fa-circle"></i>Text 6                
                            </a>
                        </div>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default panel-bg web-design">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                            <i class="fa fa-circle"></i> Text 7           
                            </a>
                        </div>
                    </div>
                    <div id="collapse6" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>You can mention your discount code when placing the order on the website or mobile app. As per the applicability & terms of the discount coupon, discount amount will be deducted from the total amount. Please note multiple discount coupons cannot be applied on the same order or with any other discounts offered to customers.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
 </div>
</div>