Bootstrap 3 Dropdown Slidesown Hành vi lạ khi Navbar bị thu gọn

Question

Vì vậy, tôi đã thêm một số hoạt ảnh vào thanh thả xuống của thanh điều hướng, nhưng vì lý do nào đó câu trả lời được chấp nhận nhiều nhất (Adding a slide effect to bootstrap dropdown) dường như bị vỡ hoặc trở thành kích thước "thông thường" khi trượt lên trên các kích thước cửa sổ nhỏ .

Vì vậy, điều kỳ lạ là điều này dường như chỉ xảy ra với các hình ảnh động slideUp từ bài báo đăng tải:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN // 
$('.dropdown').on('show.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000); 
}); 

// ADD SLIDEUP ANIMATION TO DROPDOWN // 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000); 
}); 

tôi có thể sao chép và dán những dòng này vào giao diện điều khiển của Google Chrome trên http://bootswatch.com/default/, thay đổi độ phân giải của tôi về một nơi navbars sụp đổ, và tất cả đều phá vỡ. (Tôi mở rộng lần hoạt hình để thử và khắc phục sự cố.)

bình thường:

bị hỏng slideUp:

Nhưng đối với một số lý do, nếu tôi chạy $('.navbar').find('.dropdown-menu').slideUp(5000); tôi nhận được menu hành xử bình thường:

Suy nghĩ?

Cập nhật Nó hoạt động với tùy chọn cuối cùng vì điều đó không loại bỏ lớp 'mở' khỏi phần tử LI thả xuống kèm theo. Vì vậy, có lẽ lớp open đang được loại bỏ sớm trong khi hoạt ảnh đang chạy.

Cập nhật 2 tôi sorta thể sửa chữa nó bằng cách sử dụng preventDefault:

// ADD SLIDEUP ANIMATION TO DROPDOWN // 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    e.preventDefault(); 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){ 
    $(this).parent().removeClass('open'); 
    }); 
}); 

Answer 1

Thật khó mà không thể kiểm tra các yếu tố nhưng tôi có một linh cảm rằng vấn đề của bạn có thể nói dối với container với lớp " drowpdown-menu "(hoặc bất kỳ thành phần nào thực sự có thanh cuộn kèm theo nó nếu nó không phải là trình đơn thả xuống). Tôi không nghĩ rằng có một vấn đề với jQuery của bạn nhưng tôi sẽ cố gắng thêm một phong cách để kiểm soát các tài sản tràn tràn. Hãy thử thiết lập nó để ẩn để buộc hộp đi ra ngoài giới hạn của trang. Cuộn chính sẽ xử lý nó từ đó. Tuy nhiên, theo quan điểm của UX, tôi sẽ cảnh báo bạn về việc tạo một thực đơn với rất nhiều tổ hợp có thể dẫn đến trải nghiệm kém cho người dùng cuối.

Answer 2

$(document).ready(function(){ 
 
    $(".class-name").click(function(){ 
 
     $(".class-name").slideToggle(1000);//hear you can change value of slidetoggle i.e "slow","fast", or any number 
 
    }); 
 
});