ブートストラップアコーディオンは動作しません

私は動作するために折り畳みアコーディオンを作っていますが、リンクをクリックしても何も起こらず、他のアイテムは展開されず、最初は折り畳まれません。体は3列（1〜10-1）に分割され、アコーディオンは中央に配置されます。私はブートストラップ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のlibを追加します見えます。 –

bootstrap.js前に、jQueryのlibを追加します。ブートストラップは内部的に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

私は、使用前にjQueryを宣言していますが、boostrap jsライブラリがまだ動作していません。 – huykon225

あなたはどんな誤りに直面していますか？ @ huykon225 –

ブートストラップアコーディオンは動作しません

答えて

関連する問題