自舉手風琴不起作用

我一直在嘗試使摺疊手風琴起作用，但是當我單擊鏈接時沒有任何反應，其他項目沒有擴展，第一個沒有收起。身體分成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>

來源

2017-07-02 Kourvanas Kourvana

它看起來像它工作得很好 – 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>

來源

2017-07-02 09:43:39

我在使用boostrap js庫之前聲明瞭jQuery，但手風琴仍然不起作用。 – huykon225

那麼你面對什麼錯誤？ @ huykon225 –

自舉手風琴不起作用

回答

相關問題