collapsiblesを使用している場合のBoostrapとJQueryの正しい呼び出し順序

私は奇妙な問題を抱えており、理解できません。私は、ブートストラップで折りたたみ式の一連のボタンで働いているし、すべてが、私はjqueryの前にブートストラップを呼び出す場合正常に動作するようです：collapsiblesを使用している場合のBoostrapとJQueryの正しい呼び出し順序

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

しかし、私は（行うべきであるとして）ブートストラップ前のjQueryを呼び出す場合、その後collapsiblesは」勝ちました開かれた後に閉じる。お互いに互換性のない図書館に電話しているのか、私が気づいていない別の問題があるのか分かりません。完全<head>タグは次のとおりです。

<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>

そしてcollapsiblesのサンプル：

<div class="container" id="maincontainer"> 
    <div class="panel-group"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
        <a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a> 
       </h4> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse"> 
       <ul class="list-group">     
        ### contents 
       </ul 
      </div> 
     </div> 
    </div> 
    </div>

出典

2016-09-02 vabm

折りたたみ可能なボタンのjQueryとhtmlコードを投稿することができます – luissimo

はい、今すぐ実行します – vabm

私はあなたのウェブサイトのテンプレートを使用している推測しています。

あなたの折り畳みは、おそらくjQueryの$(document).readyと組み合わせてブートストラップを使用しているため、jQueryコードの前にブートストラップをロードする必要があります。それ以外の場合、DOMの一部が欠落しています。

ブートストラップの前にjQueryを呼び出すことは、jQueryコードに多くの$(document).ready(function() { code }) ;ブロックが含まれていることです。つまり、コードを実行するためにはDOM（ページ全体の構造）をロードする必要があります。

ブートストラップの前にjQueryを呼び出すと、jQueryコードの後にDOMの大きな部分（ブートストラップの統合された部分）がロードされるため、すべてのjQueryコードを通り、多くのコードブロックでfalseを出します。すでに実行されています。

私の推測では（あなたのコード全体が見えないので）あなたのコードはうまくいくと思いますし、正しい順序でスクリプトを呼び出すことに過ぎません。

出典

2016-09-03 00:02:33 luissimo

私の '$（document）.ready'関数をスクリプトリストの一番下に変更しました。 – vabm

collapsiblesを使用している場合のBoostrapとJQueryの正しい呼び出し順序

答えて

関連する問題