Bootstrap accordion not collapsing

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>