Bootstrap Collapse Không hoạt động với JQuery

Question

Điều này khiến tôi phát điên.

Tôi có điều này:

<div class="container"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading" id="panel-head"> 


       <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle" >Records Added 
        <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> 
       </a> 

      </div> 


      <div id="collapseDiv" class="panel-collapse collapse"> 
       <div class="panel-body"> 

Và tôi đang cố gắng để bắn sự sụp đổ với điều này (theo những cách khác nhau):

$('#collapseDiv').collapse("toggle")

Tất cả tôi nhận được là:

Uncaught TypeError: $(...).collapse is not a function(…)

Bất kỳ ý tưởng nào?

`` `

` ``

Answer 1

Hãy chắc chắn rằng Jquery được bao gồm trên Bootstrap, nó hoạt động tốt

$('#collapseDiv').collapse("toggle");

.white-link{color:#fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading" id="panel-head"> 
 

 

 
     <a data-toggle="collapse" data-target="#collapseDiv" class="white-link" id="toggle">Records Added 
 
         <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> 
 
        </a> 
 

 
    </div> 
 

 

 
    <div id="collapseDiv" class="panel-collapse collapse"> 
 
     <div class="panel-body">

Answer 2

Hãy thử điều này

$('.panel-collapse').collapse({ 
     toggle: false 
    }); 

Nguồn: Bootstrap Collapse - Jquery "Collapse all" function

Answer 3

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading" id="panel-head"> <a data-toggle="collapse" href="#collapseDiv" class="white-link" id="toggle" >Records Added <span class="indicator glyphicon glyphicon-chevron-down pull-left pad-right" id ="glyphicon"></span> </a> </div> 
 
    <div id="collapseDiv" class="panel-collapse collapse"> 
 
     <div class="panel-body">rywrujtwyjdtyjdsyjktyj</div> 
 
    </div> 
 
    </div> 
 
</div>

Vui lòng kiểm tra này. Bootstrap.min.js/bootstrap.js của bạn khai báo sau khi khai báo thư viện jquery của bạn.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>