kiểm tra tất cả các con của menu con để xem có yếu tố nào trong tiêu điểm hay không, sử dụng: bộ chọn lấy nét

Question

Tôi có một menu điều hướng khi một mục được chọn trên menu, menu phụ sẽ xuất hiện. Menu con có thể chứa 3 phần tử có thể: văn bản đại diện cho một danh mục, một url để đưa người dùng đến một nơi nào đó và một hộp tìm kiếm mà người dùng có thể nhập dữ liệu vào và nhấn nút để đến hành động điều khiển. Đối với mục đích thiết kế, mỗi năm yếu tố được nhóm thành một ul.

Đây là một ví dụ về một menu con như vậy:

<div id = "submenu"> 
<ul> 
<li> Products </li> 
<li> <a href = "ourproducts"> View Our Products</a></li> 
<li> <form method="GET" action="/"><input value="" name="searchproduct"><input type="Submit" value="Search For Product"> </form> </li> 
</ul> 

Tôi có một chức năng MouseLeave trên menu con mà sẽ gây ra menu con để che giấu. Tuy nhiên, nếu biểu mẫu có tiêu điểm (giả sử người dùng đang cố gắng nhập thứ gì đó vào và chúng vô tình chạm chuột), thì tôi không muốn menu con biến mất.

Đây là những gì tôi đã cố gắng cho đến nay:

$("#submenu").mouseleave(function() { 
     var childhasfocus= 0; 
     for (var i = 1; i < $(this).children().length; i++) { 
      if ($(this).children[i].is(":focus") == true) { //CODE GOES UP TO HERE BEFORE BREAKING 
       childhasfocus = 1; 
      } 
     } 
     // TRIED THIS- if ($(this + '>:focus').length > 0){ 
     if (childhasfocus != 1){ 
      hideLinks(); 
     } 
    }); 

Hai câu hỏi:

1: Nếu một trong những yếu tố bên trong một ul đã tập trung, sẽ ul cũng đã tập trung?

2: Tôi nên thay thế câu lệnh if của mình bằng cách nào?

Answer 1

Hãy thử điều này đại diện

$("#submenu").mouseleave(function() { 
    //This will check if any child of submenu has focus. If no then hideLinks 
    if ($(this).children(":focus").length == 0){ 
     hideLinks(); 
    } 
});