Lista rozwijana usługi Twitter Bootstrap nie działa

Jakieś pomysły, dlaczego lista rozwijana Bootstrap na Twitterze nie działa?Lista rozwijana usługi Twitter Bootstrap nie działa

Javascript w głowie:

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

Źródło

2012-09-21 Snowcrash

W jakiej kolejności jest załadowany twój js? jQuery idzie pierwszy jak zawsze, bootstrap drugi. –

Jeśli masz bootstrap.js (nie bootstrap.min.js), powinieneś * nie * także dodać bootstrap-dropdown.js. To mi się udało. – Fahrenheit

Spróbuj dodać do dom-ready: $ ('. Dropdown-toggle'). Dropdown(); – user956584

Put klasy rozwijaną na div, które jest owijanie się li zamiast na samej li. Tak ...

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

Ten przykład jest z bootstrap site

Twój kod powinien wyglądać tak ...

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

Próbowałem dokonywania zagnieżdżone listy, ale tak się nie stało pracować z bootstrapem. Myślę, że to sprawia, że dwa listy są zdezorientowane.

Źródło

2012-09-21 17:46:18 noel

Próbowałem tego i wygląda okropnie. Plus to nie działa. Sprawdzanie ich strony internetowej, to nie jest to, jak oni to robią. Na przykład. spójrz tutaj: http://twitter.github.com/bootstrap/javascript.html#dropdowns – Snowcrash

Kopiuję i wklejałem mój przykład bezpośrednio z ich strony. Nie rozumiem, co masz na myśli. Potrzebujemy przykładu Twojej witryny, aby pomóc Ci dalej. – noel

To jest pierwszy kod, który udało mi się znaleźć. Dzięki. –

Upewnij się, że używasz najnowszej wersji JQuery

Źródło

2013-05-11 13:04:17

Jest to łatwo rozwiązane. Elementem owijającym twój kod jest li, ale musi to być div. Działa to dla mnie:

<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

Jeśli chcesz, aby wyglądać jak przycisk, po prostu dodaj "BTN" do listy klasy jak ten:

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

Moje nagłówka sekcja wygląda tak:

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

Masz Chcesz zrezygnować z responsywnego css, jeśli nie robisz nic na urządzenia mobilne.

Źródło

2013-06-17 14:15:34 Graham

Lista rozwijana usługi Twitter Bootstrap nie działa

Odpowiedz

Powiązane problemy