Tạo cây với bố mẹ và đường dẫn được tô sáng

Question

Tôi muốn tạo một số menu lạ mắt được hiển thị dưới dạng cây, nơi chúng ta có thể thấy mối quan hệ giữa mỗi trang và bố mẹ dễ dàng.

Nó không hoạt động nhưng tôi cần sự giúp đỡ và ý tưởng của bạn.

Dưới đây là những gì tôi đã làm: http://jsfiddle.net/bXCHn/6/

Vì vậy, ví dụ, nếu bạn di chuột "trang 4 - 3 - 2", nó sẽ làm nổi bật "trang 4-3" và "trang 4". Đây là HTML và CSS cơ bản và nếu bạn xóa tập lệnh jQuery, nó sẽ vẫn hoạt động.

jQuery cho phép chúng tôi thêm lớp sẽ làm nổi bật đường dẫn (đường viền li) của từng phần tử trước đó trong cây. Nó sẽ không tính đến cấp độ điều hướng đầu tiên:

$(this).prevAll('li:not(.first-lvl-item)').addClass('hover-prev-item'); 

Bây giờ giữ nguyên ví dụ như trên. Bạn sẽ thấy rằng dòng đầu tiên đi xuống từ "trang 4" đi quá xa (trên thực tế nó đang sử dụng toàn bộ phần tử li). Tôi muốn nó dừng trước "trang 4 - 3" ...

Tôi không biết liệu tôi có phải thay đổi tất cả cấu trúc của mình hay tôi nên xử lý nó theo cách khác. Tôi đã thử rất nhiều thứ nhưng không có tác dụng ...

Cảm ơn sự giúp đỡ của bạn!

Answer 1

Tôi đã tạo một điểm nhấn trong đó tô sáng sẽ không hoạt động nếu không có Javascript. Không tốt, nhưng nó hoạt động.

Các CSS3-option thứ n-of-type chỉ được hỗ trợ như, như vậy là giải pháp này:

Feature  Chrome Firefox (Gecko) Internet Explorer Opera Safari 
Basic support 1.0  3.5 (1.9.1)  9.0     9.5  3.1 

Tôi đã làm một làm lại về thiết kế và dựa trên một số lượng nhịp tôi đặt trước cho số lượng các cấp :) http://jsfiddle.net/bXCHn/10/

Còn gì để làm? Cấu trúc lại cách tôi đã sử dụng bộ chọn thứ n-loại và cố gắng hoàn thành nó bằng javascript. Hiện tại, nó chỉ hỗ trợ các cấp độ sâu như bạn xác định trong tệp CSS của bạn.