Twitter Bootstrap: Menu thả xuống Di chuột cho Máy tính để bàn, Nhấp vào Máy tính bảng/Điện thoại?

Question

Dường như có nhiều câu hỏi/câu trả lời về cách thay đổi trình đơn thả xuống của Twitter Bootstrap xuất hiện trên một nhấp chuột để xuất hiện trên di chuột. Các nhà xây dựng của Bootstrap có lý do chính đáng để sử dụng nhấp chuột thay vì di chuột - không hoạt động trên hầu hết các máy tính bảng & điện thoại. Tuy nhiên, một trong những lý do tại sao tôi đang sử dụng Bootstrap là cho các tính năng đáp ứng của nó. Tôi muốn một trang web có thể xem được trên máy tính để bàn, máy tính bảng và điện thoại. Mặc dù cách nhấp để tải xuống là cần thiết cho máy tính bảng và điện thoại, nhưng đó không phải là hành vi mong đợi đối với máy tính để bàn. Tôi muốn trang web của mình đáp ứng, nhưng không phải trả chi phí phải đào tạo lại người dùng!

Có cách nào để phân phối trình đơn thả xuống di chuột cho máy tính để bàn và nhấp vào menu thả xuống cho máy tính bảng và điện thoại không?

Answer 1

Bạn có thể với "lớp tiện ích Đáp ứng"

http://twitter.github.com/bootstrap/scaffolding.html ở dưới cùng của trang

Answer 2

Tôi tạo ra một plugin (làm việc trên một vài cải tiến, nhưng nó chắc chắn hoạt động như là) cho phép đơn thả xuống để làm việc khi di chuột, nhưng nó không can thiệp vào sự kiện click của Twitter Bootstrap, vì vậy bạn có thể liên kết an toàn cả hai, về cơ bản có nghĩa là nếu có chuột, nó sẽ kích hoạt khi di chuột, nhưng nếu không có chuột (tức là màn hình cảm ứng trên máy tính bảng), nó sẽ vẫn kích hoạt khi được nhấp.

Tôi có plugin lưu trữ trên GitHub: https://github.com/CWSpear/twitter-bootstrap-hover-dropdown

Nó hoạt động bằng cách gọi nó một cách rõ ràng, nhưng tôi sẽ tinh chỉnh mã để làm việc với dữ liệu thuộc tính trong tương lai gần.

Answer 3

Tôi đã tìm kiếm chính xác điều này. Và tôi đã tìm ra giải pháp tốt hơn (tôi nghĩ). Chúng tôi có thể dễ dàng thực hiện việc này bằng cách sử dụng thư viện tuyệt vời Modernizr.js. Chúng tôi có thể phát hiện thiết bị màn hình cảm ứng theo chức năng dưới đây.

function is_touch_device() { 
    return !!('ontouchstart' in window); 
} 

Và sau đó chúng ta có thể vô hiệu hóa các URL trong các siêu liên kết tự động thông qua Javascript bằng cách thay đổi vị trí để "#" hoặc bằng cách ngăn chặn hành động mặc định của các mục trong menu cha mẹ. Mã cuối cùng sẽ như sau.

Để biết thêm chi tiết, bạn có thể thấy this link Tôi tin rằng ai đó sẽ bỏ phiếu cho tôi UP :-)

Cảm ơn