Tôi đã gặp vấn đề tương tự gần đây, tôi đã giải quyết vấn đề này bằng cách viết tập lệnh tùy chỉnh Show
Xin chào, tôi cần một mục menu tạo danh sách thả xuống với các mục phụ của nó, vì vậy tôi đặt liên kết cho mục menu này để định tuyến. và đặt các mục phụ bên dưới nó trong cấu trúc menu Điều này có vẻ hoạt động tốt, nó tạo ra một mục menu hiển thị menu thả xuống khi di chuột, nhưng sau đó tôi nhận thấy rằng trên thiết bị di động, nó không mở danh sách thả xuống trong lần chạm/nhấp chuột đầu tiên. Sau đó, nó hoạt động tốt. Mỗi lần chạm/bấm sẽ mở/đóng nó như mong đợi, nhưng. lần đầu tiên là quan trọng nhất, tất nhiên, người dùng không nên nhấp đi nhấp lại cùng một nội dung. Sau đây là mã tôi nhận được cho mục menu chính đó sau khi tải trang và chỉ cần mở menu chính
Khi tôi nhấp vào nó lần đầu tiên, SPAN với lớp "dropdown-toggle" nhận được Một lần nhấp khác, sẽ đặt thành Các lần nhấp tiếp theo sẽ đóng và mở lại danh sách thả xuống bình thường, như tôi đã nói ở trên, thay đổi các thuộc tính đó cho phù hợp Trong tìm kiếm của mình, tôi cũng tìm thấy những thứ khác, chẳng hạn như ai đó nói rằng họ có bootstrap. js tải hai lần, gây ra sự cố, nhưng tôi đã xác minh và tôi chỉ có một lần Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa bằng plugin thả xuống Bootstrap Tổng quanDanh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Chúng được thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được bật bằng cách nhấp chuột, không phải bằng cách di chuột; Danh sách thả xuống được xây dựng trên thư viện của bên thứ ba, Popper. js, cung cấp tính năng định vị động và phát hiện khung nhìn. Hãy chắc chắn bao gồm popper. tối thiểu. js trước JavaScript của Bootstrap hoặc sử dụng 4 / 5 có chứa Popper. js. thuốc phiện. js không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng mặc dù không yêu cầu định vị độngNếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó khả năng tiếp cậnTiêu chuẩn WAI ARIA xác định một thực tế, nhưng điều này dành riêng cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, mục menu hộp kiểm, mục menu nút radio, nhóm nút radio và menu phụ Mặt khác, trình đơn thả xuống của Bootstrap được thiết kế chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu. Chẳng hạn, có thể tạo danh sách thả xuống chứa đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng như không tự động thêm) bất kỳ thuộc tính 8 và 9 nào cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải tự đưa vào các thuộc tính cụ thể hơn nàyTuy nhiên, Bootstrap có thêm hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các phần tử 0 riêng lẻ bằng các phím con trỏ và đóng menu bằng phím ESCví dụBọc nút chuyển đổi của trình đơn thả xuống (nút hoặc liên kết của bạn) và trình đơn thả xuống trong 1 hoặc một phần tử khác khai báo 2. Danh sách thả xuống có thể được kích hoạt từ các yếu tố 3hoặc để phù hợp hơn với nhu cầu tiềm năng của bạnnút đơnBất kỳ 4 đơn lẻ nào cũng có thể được chuyển thành chuyển đổi thả xuống với một số thay đổi đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với một trong haiyếu tố. 1 5 6Và với các yếu tố 3 5Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào
nút táchTương tự, tạo danh sách thả xuống của nút tách với cách đánh dấu gần giống như danh sách thả xuống của nút đơn, nhưng có thêm 8 để tạo khoảng cách thích hợp xung quanh dấu mũ thả xuốngChúng tôi sử dụng lớp bổ sung này để giảm 25% 9 ngang ở hai bên của dấu mũ và loại bỏ 90 được thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu nháy ở giữa nút tách và cung cấp vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính
định cỡMenu thả xuống nút hoạt động với các nút ở mọi kích cỡ, bao gồm các nút thả xuống mặc định và chia nhỏ Nút tách lớn Toggle Dropdown Nút tách nhỏ Toggle Dropdown 9HướngdropupKích hoạt menu thả xuống phía trên các phần tử bằng cách thêm 91 vào phần tử gốcTách dropup Chuyển đổi thả xuống 3Thả ngayKích hoạt menu thả xuống ở bên phải của các phần tử bằng cách thêm 92 vào phần tử chínhTách dropright Chuyển đổi Dropright 5thả tráiKích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm 93 vào phần tử chính 7Trước đây, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy ý sử dụng các phần tử trong danh sách thả xuống của mình thay vì chỉ 3s. 1____195 96Bạn cũng có thể tạo các mục thả xuống không tương tác với 97. Thoải mái tạo kiểu hơn nữa với các tiện ích văn bản hoặc CSS tùy chỉnh 3Tích cựcThêm 98 vào các mục trong danh sách thả xuống để định kiểu chúng là hoạt động 50Vô hiệu hóaThêm 99 vào các mục trong danh sách thả xuống để định kiểu chúng là bị vô hiệu hóa 51Theo mặc định, menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của menu chính. Thêm 30 vào một 31 để căn phải menu thả xuốngĐứng lên. Danh sách thả xuống được định vị nhờ Popper. js (trừ khi chúng được chứa trong thanh điều hướng) 52căn chỉnh đáp ứngNếu bạn muốn sử dụng căn chỉnh đáp ứng, hãy tắt tính năng định vị động bằng cách thêm thuộc tính 32 và sử dụng các lớp biến thể đáp ứngĐể căn chỉnh menu thả xuống bên phải với điểm dừng đã cho hoặc lớn hơn, hãy thêm 33Căn trái nhưng căn phải khi màn hình lớn 53Để căn trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, hãy thêm 30 và 35Căn phải nhưng căn trái khi màn hình lớn 54Lưu ý rằng bạn không cần thêm thuộc tính 32 vào các nút thả xuống trong thanh điều hướng vì Popper. js không được sử dụng trong thanh điều hướngThêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào 55dải phân cáchTách các nhóm mục menu có liên quan bằng một dải phân cách 56ChữĐặt bất kỳ văn bản dạng tự do nào trong menu thả xuống có văn bản và sử dụng các tiện ích giãn cách. Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng của menu 57Các hình thứcĐặt một biểu mẫu trong menu thả xuống hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc đệm để cung cấp cho nó khoảng trống mà bạn yêu cầu 58 59tùy chọn thả xuốngSử dụng 37 hoặc 38 để thay đổi vị trí của danh sách thả xuống 0Cách sử dụngThông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi lớp 39 trên mục danh sách gốc. Thuộc tính 50 được dựa vào để đóng các menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính nàyTrên các thiết bị hỗ trợ cảm ứng, việc mở một danh sách thả xuống sẽ thêm các trình xử lý trống ( 51) 52 cho phần tử con trực tiếp của phần tử. Bản hack xấu xí được thừa nhận này là cần thiết để giải quyết một vấn đề khó hiểu trong ủy quyền sự kiện của iOS, điều này sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài danh sách thả xuống kích hoạt mã đóng danh sách thả xuống. Sau khi đóng danh sách thả xuống, các trình xử lý 52 trống bổ sung này sẽ bị xóaThông qua thuộc tính dữ liệuThêm 50 vào một liên kết hoặc nút để chuyển đổi danh sách thả xuống 1Qua JavaScriptGọi danh sách thả xuống qua JavaScript 2Vẫn yêu cầu
|