Bootstrap Responsive Submenu bị sụp đổ có chiều cao cố định khi thu gọn đầu tiên

Question

Sự cố này có thể được thể hiện trong tất cả (mà tôi biết) phiên bản Twitter Bootstrap. Vì vậy, tôi có một thanh điều hướng và khi màn hình nhỏ hơn, nó sẽ trở thành một khay thu gọn. Hành vi này có thể được nhìn thấy trên trang demo demo. Tôi cũng có các menu con, xuất hiện trên màn hình mở rộng navbar ban đầu. Vấn đề là, trên sự sụp đổ đầu tiên, collapsable có được một tập chiều cao rõ ràng. Nếu bạn đóng và mở rộng lại, collapsable sẽ nhận được height:auto;

Vì vậy, khi tôi nhấp vào một mục menu con, menu thả xuống sẽ được mở rộng, nhưng nó tràn do chiều cao được đặt rõ ràng.

giải pháp cố gắng của tôi đã nói thêm:

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

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

này dường như không ảnh hưởng gì cả, tôi đã xóa mã đó và nó vẫn có tác dụng tương tự. Nếu một JS Fiddle sẽ giúp đỡ, tôi rất sẵn lòng cung cấp một, nhưng bạn có thể thấy tất cả điều này trên trang demo demo Bootstrap.

Xin cảm ơn trước, Charles.

Answer 1

Nó làm phiền tôi một chút, và sau khi tìm kiếm, tôi thấy rằng vấn đề có thể được giải quyết bằng cách thêm lớp .collapse vào phần tử .nav-collapse.

Working demo (jsfiddle)

Một trong những thời điểm mà chúng ta vừa nói Meh .. Tôi nên đã theo doc để thư (xem Responsive navbar):

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

---

Đối với hậu thế:

Tìm thấy nhờ sự cố này: https://github.com/twitter/bootstrap/issues/3788

Tôi không chắc chắn nếu nó thực sự có liên quan, nhưng gỡ lỗi của tôi cho thấy các vấn đề về chiều cao chuyển tiếp đầu tiên đặt anyway (source):

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

Answer 2

Bootstrap đang đặt chiều cao kiểu phần tử thành 280px khi khởi tạo phần tử thu gọn.

tôi đã thêm dòng JQuery này đã sẵn sàng() chức năng của tôi ngay sau khi cuộc gọi của tôi để .collapse()

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

Và, bây giờ mọi thứ hoạt động như tôi mong đợi.