2012-09-21 41 views
8

Bu Twitter Bootstrap açılırmasının neden çalışmadığı konusunda herhangi bir fikrin var mı? kafasına7 Twitter Bootstrap açılırken çalışmıyor

JavaScript:

<script src="/assets/js/bootstrap.js" type="text/javascript"></script> 

Menü HTML:

   <li class="dropdown"> 
       <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="/app/1">Item A</a></li> 
        <li><a href="/app/2">Item B</a></li> 
        <li><a href="/app/3">Item C</a></li> 
       </ul> 
       </li> 
+3

Js'niz hangi sırada yüklenir? jQuery her zaman olduğu gibi gider, ikinci olarak bootstrap. –

+0

Eğer bootstrap.js (bootstrap.min.js değil) varsa, * bootstrap-dropdown.js dosyasını da eklememeniz gerekir. Bu benim için hile yaptı. – Fahrenheit

+1

Dom hazır öğesine eklemeyi deneyin: $ ('. Dropdown-toggle'). Dropdown(); – user956584

cevap

7

li kendisinde yerine li sarma bir div üzerinde açılan sınıfını koyun. Bunun gibi ...

 <div class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> 
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
     ... 
     </ul> 
     </div> 

Bu örnek ... Kodunuz gibi görünmelidir bootstrap site

dan

<!DOCTYPE html > 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="../plugins/js/bootstrap-dropdown.js"></script> 
    <link href="../theme/bootstrap.css" rel=stylesheet type="text/css"> 

    </head> 
    <div class="dropdown"> 
     <ul class="dropdown"> 
     <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
      <b class="caret"></b> 
     </a> 
      <ul class="dropdown-menu"> 
       <li><a href="/app/1">Item A</a></li> 
       <li><a href="/app/2">Item B</a></li> 
       <li><a href="/app/3">Item C</a></li> 
      </ul> 
     </ul> 
    </div> 

Ben iç içe geçmiş bir listesini yaparak denedik ama olmadı

bootstrap ile çalışmak. Sanırım iki düş kırıklığı oluyor.

+0

Bunu denedim ve korkunç görünüyor. Artı çalışmıyor. Web sitelerini kontrol etmek, böyle yapmıyorlar. Örneğin. http://twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

+2

Örneğimi doğrudan kendi sitelerinden kopyalayıp yapıştırdım. Ne demek istediğini anlamadım. Daha fazla yardımcı olmak için sitenizin bir örneğine ihtiyacımız var. – noel

+0

Bu aslında çalıştığını bulduğum ilk kod. Teşekkürler. –

2

Eğer Bu kolayca çözülür JQuery

2

son sürümünü kullandığınızdan emin olun. Kodunuzu sarmalayan öğe bir li, ancak bir div olması gerekiyor. Bu benim için çalışıyor:

<div class="dropdown"> 
    <a data-target="#" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown menu here... 
    <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu"> 
    <li><a href="/app/1">Item A</a></li> 
    <li><a href="/app/2">Item B</a></li> 
    <li><a href="/app/3">Item C</a></li> 
    </ul> 
</div> 

enter image description here

bunu bir düğme gibi görünmek istiyorsanız, sadece bu gibi sınıf listesine "btn adında" ekleyin:

<a data-target="#" data-toggle="dropdown" class="dropdown-toggle btn" href="#">

üstbilgim bölüm şu şekilde görünür:

<link rel='stylesheet' type='text/css' href='css/bootstrap.min.css'> 
<link rel='stylesheet' type='text/css' href='css/bootstrap-responsive.min.css'> 
<script src='js/jquery-2.0.0.min.js' type='text/javascript'> 
<script src='js/bootstrap.min.js' type='text/javascript'> 

You ma Mobil cihazlar için hiçbir şey yapmıyorsanız duyarlı css'yi bırakmak istiyorum.

İlgili konular