2012-09-21 47 views
8

Bất kỳ ý tưởng nào tại sao trình tải xuống Twitter Bootstrap này không hoạt động?Twitter Bootstrap thả xuống không hoạt động

Javascript trong đầu:

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

menu 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

Thứ tự của bạn được tải trong thứ tự nào? jQuery đi đầu tiên như mọi khi, bootstrap thứ hai. –

+0

Nếu bạn có bootstrap.js (không phải bootstrap.min.js), bạn nên * không * cũng thêm bootstrap-dropdown.js. Điều đó đã đánh lừa tôi. – Fahrenheit

+1

Hãy thử thêm vào chế độ sẵn sàng cho dom: $ ('. Dropdown-toggle'). Dropdown(); – user956584

Trả lời

7

Đặt lớp thả xuống trên một div đó là gói các li hơn là trên li riêng của mình. Như thế này ...

 <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> 

dụ Đó là từ bootstrap site

Mã của bạn sẽ trông như thế này ...

<!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> 

tôi đã cố gắng thực hiện một danh sách lồng nhau, nhưng nó đã không làm việc với bootstrap. Tôi nghĩ rằng nó được hai dropdowns bối rối.

+0

Tôi đã thử điều đó và có vẻ khủng khiếp. Thêm vào đó nó không hoạt động. Kiểm tra trang web của họ, đó không phải là cách họ đang làm nó. Ví dụ. xem tại đây: http://twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

+2

Tôi sao chép và dán ví dụ của mình trực tiếp từ trang web của họ. Tôi không hiểu ý bạn là gì. Chúng tôi cần một ví dụ về trang web của bạn để trợ giúp thêm. – noel

+0

Đây là mã đầu tiên tôi tìm thấy thực sự hoạt động. Cảm ơn. –

2

Đảm bảo bạn đang sử dụng phiên bản mới nhất của JQuery

2

Điều này dễ dàng được giải quyết. Phần tử bao quanh mã của bạn là một li, nhưng nó cần phải là một div. Này làm việc cho tôi:

<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

Nếu bạn muốn nó trông giống như một nút, chỉ cần thêm "btn" vào danh sách lớp như thế này:

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

tiêu đề của tôi phần trông như sau:

<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'> 

Bạn ma y muốn bỏ qua css đáp ứng nếu bạn không làm bất cứ điều gì cho thiết bị di động.

Các vấn đề liên quan