Danh sách như chọn thả xuống với jQuery?

Question

Vui lòng,

Tôi muốn mô phỏng chọn thả xuống, nhưng sẽ chỉ có liên kết, không có biểu mẫu. Sự cố là làm cách nào để chọn liên kết danh mục hoặc danh mục phụ có thể nhìn thấy mà bạn hiện đang ở đâu?

<ul><li>Category 
    <ul> 
    <li>Subcategory1</li> 
    <li>Subcategory2</li> 
    </ul> 
</li></ul> 

Vì vậy, khi bạn đang ở trên loại, có thể nhìn thấy sẽ là tên của loại và điều này rất dễ dàng vì LI đầu tiên của mình, nhưng khi bạn đang ở trên tiểu thể loại sau đó tên của tiểu thể loại sẽ được "chọn" và có thể nhìn thấy .

Nếu bạn có một số giải pháp khác thì hãy liệt kê, đề xuất tôi.

Xin lỗi vì tiếng anh của tôi tôi không biết làm thế nào để giải thích tốt hơn :)

Answer 1

Nếu tôi hiểu chính xác bạn, có vẻ như tôi chỉ cần một vài yếu tố div. Một để hiển thị mục hiện được chọn và mục kia hiển thị toàn bộ menu (trừ phần tử hiện tại?).

Nếu đó là trường hợp, bạn có thể đính kèm một sự kiện click vào từng mục menu mà sẽ cập nhật nội dung của div top:

<div id="current_page">Default Value</div> 
<div id="current_menu"> 
    <ul> 
    <li><a href="page1.html">Page 1</a></li> 
    <li><a href="page2.html">Page 2</a></li> 
    </ul> 
</div> 

Sau đó, bạn sẽ sử dụng jQuery để thêm một số hiệu ứng và logic:

$("#current_page").click(function(){ 
    $("#current_menu").slideToggle(); 
}); 

$("#current_menu a").click(function(event){ 
    event.preventDefault(); //prevent synchronous loading 
    $("#current_page").html($(this).text()); 
}); 

Answer 2

Tôi nghĩ rằng bạn đang tìm kiếm Suckerfish Dropdowns.

Answer 3

Sau mỗi lần nhấp chuột, bạn cần phải thiết lập các lớp của li thích hợp bằng cách duyệt qua danh sách các mục và kiểm tra đối với các vị trí hiện tại:

<div id="div1"> 
    <ul> 
    <li>Category 
     <ul> 
      <li><a href="abc">Subcategory1</a></li> 
      <li><a href="xyz">Subcategory2</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

Sau đó javascript của bạn:

var loc = window.location; 
$("#div1 li").each(function(){ 
    var a = $("a", this).attr("href"); 
    if(a == loc){ 
     $(this).addClass("hilight"); 
    } else { 
     $(this).removeClass("hilight"); 
    } 
}); 

Answer 4

Dưới đây là danh sách tốt đẹp của giải pháp khả thi - http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/