Podpowierzchniowe menu zwinięte podskokiem ma stałą wysokość podczas pierwszego zwinięcia.

Question

Ten problem może być wyświetlany we wszystkich (znanych mi) wersjach Bootstrap na Twitterze. Mam więc navbar, a gdy ekran jest mniejszy, staje się on składaną tacą. To zachowanie można zobaczyć na stronie demo programu startowego. Mam również podmenu, które pojawiają się zwinięte na początkowym rozszerzeniu paska nawigacyjnego. Problem polega na tym, że po pierwszym zwinięciu, zwijany dostaje ustaloną wysokość. Jeśli zamkniesz i rozwiniesz ponownie, zwinięty obiekt otrzyma znacznik height:auto; Tak więc po kliknięciu elementu podmenu rozwijany zostanie rozwinięty, ale zostanie przepełniony z powodu jawnego ustawienia wysokości.

Moja próba roztwór dodając:

$(function() { 
    $('.nav-collapse').on({ 
    shown: function() { 
     $(this).css('height', 'auto'); 
    }, 

    hidden: function() { 
     $(this).css('height', '0px'); 
    } 
    }); 
}); 

To nie wydaje się wpływać na to w ogóle, mam usunięte ten kod i nadal ma ten sam efekt. Jeśli JS Fiddle pomogłoby, z chęcią je udostępnię, ale możesz to wszystko zobaczyć na stronie demonstracyjnej Bootstrap.

Z góry dziękuję, Charles.

Answer 1

Trochę mi to przeszkadzało, a po kilku poszukiwaniach odkryłem, że problem można rozwiązać, dodając klasę .collapse do elementu .nav-collapse.

Working demo (jsfiddle)

jeden z tych czasach, gdy po prostu powiedzieć Meh .. powinien Śledzę doc pismo (patrz Responsive navbar):

<div class="nav-collapse collapse"> 
    <!-- .nav, .navbar-search, .navbar-form, etc --> 
</div> 

---

Dla potomności:

Wykryto dzięki temu wydaniu: https://github.com/twitter/bootstrap/issues/3788

Nie jestem pewien, czy to naprawdę jest związany, ale mój problem debugowanie pokazał na pierwszej wysokości przejściowej resetowanie anyway (source):

$.support.transition && this.$element[dimension](this.$element[0][scroll]) 

Answer 2

Funkcja Bootstrap ustawia wysokość stylu elementu na 280px po zainicjowaniu elementu zwinięcia.

I dodaje ten wiersz w moim JQuery gotowy function() zaraz po moje wezwanie do .collapse()

$("#avail_detail").collapse(); 
$("#avail_detail").css("height","auto"); 

A teraz rzeczy zachowują się jak oczekuję.