2012-02-07 13 views
21

z Twitter Bootstrap 2, w jaki sposób dostać linki pracujących w upadku-nav:Twitter Bootstrap 2, zapaść-nav

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
     <a class="brand" href="/index.html">Hubsphere - Controller</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class=""> 
      <a href="./index.html">Overview</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>  

mam jQuery zawarte, a plik bootstrap-collapse.js.

Próbowałem wywoływać $('.nav-collapse').collapse(), ale to po prostu otwiera obszar zwijania i dawka nie aktywuje przycisku. to jest to, czego się spodziewałem, ponieważ powinno działać ze znacznikami.

dzięki

+0

Dodałem bootstrap-collapse.js, ale to nie pomaga – nodrog

+0

Przeczytaj dokładnie dokumentację bootstrap. http://twitter.github.com/bootstrap/javascript.html#collapse Brakuje części, w której faktycznie wywołujesz funkcję $ (". zwinąć"). collapse() zwróć uwagę, że musisz mieć również jquery włączone także strona. –

+2

dzięki za wskazanie na czytanie dokumentacji, zrobiłem i lepiej kod. Jeśli czytasz kod i dokumentację, istnieje opcja znaczników, która powinna działać bez konieczności wywoływania $ (". Zwinięcia"). Collapse(), które w tym przypadku jest błędne, ponieważ musiałoby to być .nav-collapse . ze strony bootstrap zobaczysz, że nigdzie tego nie nazywają. a jeśli to nazwiesz, otworzy się tylko jego zwinięcie! czy nie przeczytałeś pytania, które pokazuje pasek nawigacyjny na górze ... – nodrog

Odpowiedz

11

byłem trochę ciekawy, jeśli problem nadal występuje z bootstrap 2.0.4

W rzeczywistości, to nie ma sensu, aby obejmować zarówno bootstrap.js i bootstrap-collapse.js od bootstrap.js obejmuje bootstrap -collapse.js

tylko boostrap-collapse.js http://jsfiddle.net/baptme/YWUmb/6/

działa pefectly dobrze, jak oczekiwano.

oba boostrap.js & boostrap-collapse.js: http://jsfiddle.net/baptme/YWUmb/5/

Po kliknięciu na przycisk zapaść po raz pierwszy div otwiera i zamyka natychmiast. (Myślę, że to dlatego, że wtyczka jest zadeklarowana dwa razy).

A potem działa dobrze.

Ten problem dotyczy wczesnej wersji programu Twitter boostrap (2.0.0), ale został rozwiązany lub już nie występuje z powodu zmiany struktury wtyczki.

11

Ok, więc mój problem było to, że w tym bootstrap.js i bootstrap-collapse.js w tym samym pliku, i zakłada się, że była potrzebna bootstrap.js, a gdy to nie działa I załączony plik bootstrap-collapse.js.

Jest to teraz dla mnie oczywiste, ale bootstrap.js to wszystko, co zostało zwinięte przez bootstrap. Co jest miłe ...

+1

Dang !! Zmarnowałem 2 do 3 godzin na ten problem !!! Sprawdziłem i miałem ten sam bałagan, o którym wspomniałeś ... Miałem oba pliki. Potrzebny tylko główny. Powinny to wyjaśnić. Dziękuję Ci!!! – MattSlay

+0

tak, to było bardzo denerwujące, a ty kopiesz się, gdy to wypracujesz ... cieszę się, że mój czas pomoże w końcu – nodrog

+0

Właśnie rozwiązałem mój problem! Dzięki. – joshcartme

3

Istnieje inny przypadek, w którym plik bootstrap.css jest wymagany PO bootstrap-responsive.css. To również spowoduje, że przycisk się nie pojawi. Pamiętaj, aby najpierw załadować plik bootstrap.css PRZED plikiem bootstrap-responsive.css.

+0

Uratowałem mój dzień :) – jonas

0

Albo dołączasz pełną bibliotekę jQuery ładowania (która przechowuje wszystkie js do wszystkich wtyczek) lub dołączasz pojedynczą bibliotekę.

Więc dla ex: jeśli chcesz korzystać z podpowiedzi można:

  • obejmują: js/bootstrap.js (zawiera wszystkie wtyczki)

lub

  • obejmują: bootstrap/js/bootstrap-tooltip.js

drugie spotkanie hod jest lepszy, ponieważ nie ładujesz do przeglądarki rzeczy, które nie będą używane!

Użyj wersji LESS z github lub skompiluj własną przez niestandardowy kompilator bootstrap, nigdy nie używaj domyślnego!