自举手风琴不起作用

问题描述：

我一直在尝试使折叠手风琴起作用，但是当我单击链接时没有任何反应，其他项目没有扩展，第一个没有收起。身体分成3列（1-10-1），手风琴放在中间。我使用bootstrap 3.3.7和jquery 3.2.1。这是由于我的标签是如何铺设的，或者与jQuery有关？自举手风琴不起作用

HTML：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <!-- Body --> 
 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col-lg-1"></div> 
 
      <div class="col-lg-10"> 
 

 
       <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading" role="tab" id="heading1"> 
 
          <h4 class="panel-title"> 
 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> 
 
            Panel 1 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> 
 
          <div class="panel-body"> 
 
           <p>Text for 1</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading" role="tab" id="heading2"> 
 
          <h4 class="panel-title"> 
 
           <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
 
            Panel 2 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> 
 
          <div class="panel-body"> 
 
           <p>Text for 2</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
      <div class="col-lg-1"></div> 
 

 
     </div> 
 

 
    </div> <!-- Body --> 
 

 
</body> 
 
</html>

它看起来像它工作得很好 – Chiller

你的代码工作正常 https://jsbin.com/bodubuwoho/edit?html,output –

先加的jQuery库。 –

答

bootstrap.js之前添加的jQuery库。因为bootstrap内部使用jQuery。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</head> 
 
<body> 
 

 
    <!-- Body --> 
 
    <div class="container"> 
 

 
     <div class="row"> 
 

 
      <div class="col-lg-1"></div> 
 
      <div class="col-lg-10"> 
 

 
       <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading" role="tab" id="heading1"> 
 
          <h4 class="panel-title"> 
 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> 
 
            Panel 1 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1"> 
 
          <div class="panel-body"> 
 
           <p>Text for 1</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading" role="tab" id="heading2"> 
 
          <h4 class="panel-title"> 
 
           <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> 
 
            Panel 2 
 
           </a> 
 
          </h4> 
 
         </div> 
 
         <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2"> 
 
          <div class="panel-body"> 
 
           <p>Text for 2</p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
      <div class="col-lg-1"></div> 
 

 
     </div> 
 

 
    </div> <!-- Body --> 
 

 
</body> 
 
</html>

我在使用boostrap js库之前声明了jQuery，但手风琴仍然不起作用。 – huykon225

那么你面对什么错误？ @ huykon225 –

自举手风琴不起作用

相关推荐