2008-12-19 36 views
10

Tôi đã thiết lập một số accordion trên một trang bằng cách sử dụng plugin jquery accordion để tôi có thể triển khai mở rộng tất cả và thu gọn tất cả chức năng.Jquery Accordion Đóng rồi Mở

Mỗi phần tử ID là nó accordion riêng và mã dưới đây làm việc để đóng tất cả chúng không có vấn đề mà những người đã được mở:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", -1) 
; 

Vấn đề của tôi là với mở rộng tất cả. Khi tôi mở rộng tất cả các mã này bằng mã này:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", 0) 
; 

Một số hợp đồng và một số sẽ mở rộng dựa trên việc chúng có mở trước đó hay không.

Ý tưởng của tôi để sửa lỗi này là thu gọn tất cả và sau đó mở rộng tất cả khi mở rộng tất cả được nhấp. Tuy nhiên, mã này sẽ không thực thi đúng cách:

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", -1) 
; 
$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .accordion("activate", 0) 
; 

Nó sẽ chỉ nhấn lệnh thứ hai và không đóng tất cả trước. Bất kỳ đề xuất?

Trả lời

32

Tôi không chắc chắn những gì bạn đang theo dõi, nhưng đây là dự đoán tốt nhất của tôi. Trong tất cả các thỏa thuận của bạn, bạn muốn nút "mở tất cả" để mở tất cả các accordions được đóng lại (có nghĩa là, không có phần được hiển thị). Tôi muốn làm điều đó bằng cách sử dụng filter()

$("#contact, #address, #email, #sales, #equipment, #notes, #marketingdata") 
    .filter(":not(:has(.selected))") 
    .accordion("activate", 0) 
; 

Đó có phải là những gì bạn đang theo dõi không?


Chỉnh sửa để giải thích rằng chức năng lọc:

Chức năng lọc chỉ chạy lựa chọn hiện tại của bạn thông qua một bộ lọc, loại bỏ bất cứ điều gì mà không phù hợp. Nó có hai hình thức khác nhau: một trong những nơi bạn vượt qua một truy vấn jQuery thông thường trong, như tôi đã làm ở trên, và khác nơi bạn có thể xác định một chức năng để lọc. Nếu hàm trả về false, thì phần tử đó sẽ bị loại bỏ.

Trong trường hợp này, truy vấn xóa mọi thứ không (:not) có (:has) một đứa trẻ có lớp "đã chọn" (.selected). Tôi đã sử dụng bộ chọn .selected ở đây vì đó là điều mà accordion thêm vào bảng điều khiển hiện đang mở.

Nếu bạn chỉ có một accordion, hoặc bạn đã cho mỗi accordion của bạn một số loại định danh, chẳng hạn như một tên lớp, sau đó bạn rất có thể làm giảm toàn bộ kịch bản. Hãy nói rằng đối với mỗi phần tử bạn muốn biến thành một accordion, bạn cho nó lớp "accord".

$(".accord:not(:has(.selected))").accordion("activate", 0); 

Điều này dễ đọc hơn và dễ bảo trì hơn, vì bạn có thể dễ dàng thêm nhiều tùy chọn trong tương lai nếu bạn muốn và điều này sẽ xử lý.

Các tài liệu cho bộ lọc là ở đây: http://docs.jquery.com/Traversing/filter

+0

Wow! Đó là hoàn hảo!Bạn có thể giải thích dòng mã .filter cho tôi không? Nó hoạt động tốt, nhưng tôi thực sự muốn hiểu những gì nó đang làm để tham khảo trong tương lai (tôi mới đến jquery). Cảm ơn bạn đã giúp đỡ! Jon – Jon

+0

Giải thích tuyệt vời! Đó sẽ là một trợ giúp lớn trong tương lai. – Jon

+0

nickf - giải thích tuyệt vời! Tôi chưa từng thấy các bộ lọc lồng nhau như thế trước đây. Rất hữu ích. –

0

Tôi đã có cùng một vấn đề và giải quyết nó với một số mã ngắn tận dụng từng chức năng của JQuery() để sụp đổ trong khi thiết tập trung vào mục [0] để bình thường chuyển hướng có thể tiếp tục.

http://spstring.jeffthink.com/?p=49

2
jQuery('#accordion').accordion({   
    active:-1, 
}); 
+0

cảm ơn công việc của nó tốt. –

Các vấn đề liên quan