2014-04-09 30 views
16

Bootstrap kullanarak çökebilir bir bileşen oluşturmaya çalışıyorum. sınıf "paneli vücut" öğeleri daraltmak gerekir tıklandığında ama tıklama hiçbir etkisi yoktur vermediğinde Kodum "Katlanabilir Grubu Ürün # 1" buBootstrap Daralt çalışmıyor

<html> 
<head> 

    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 


</head> 
<body> 

<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
    <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Collapsible Group Item #1 
    </a> 
    </h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse in"> 
    <div class="panel-body"> 
    Anim pariatur cliche reprehenderit 
    </div> 
</div> 
</div> 
</div> 

</body> 
</html> 

olduğunu. Bu kodu doğrudan Bootstrap belgelerinden kopyaladım, hala çalışmıyor. Sorunun ne olduğunu anlayabilen biri var mı?

cevap

32

jQuery önyükleme js önce jquery kütüphanesini eklemeniz gerekir böylece

DEMO

<html> 
<head> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <!-- THIS LINE --> 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
        Collapsible Group Item #1 
       </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in"> 
      <div class="panel-body"> 
       Anim pariatur cliche reprehenderit 
      </div> 
     </div> 
    </div> 
</div> 

</body> 
</html> 
+1

bu fonksiyon https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js işe yaramaz neden biliyor musunuz? – cbarg

11

bootstrap.js jquery kütüphanesini kullanıyor ;-) gereklidir.

yüzden

Not gibi jQuery kütüphanesi ekleyin: js dosyasının düzenini sağlamak ediniz. derleme

<head> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
</head> 
5

için alt yaklaşıma html sayfası kullanımı üst jQuery bkz ihtiyaç önyükleme en basic template

8

... jQuery ekleyin ve bir işe yaramaz daha neden jQuery için emin yalnızca bir bağlantı yapmak

-1

Belki de mobil görünüm bağlantı noktanız ayarlanmamış. Menünün mobil cihazlarda çalışmasına izin vermek için <head></head>'un içine aşağıdaki meta etiketi ekleyin.

<meta name=viewport content="width=device-width, initial-scale=1">