jQuery tìm ra nếu cha mẹ mất 'tập trung'

Question

Tôi đang mắc kẹt khi tìm ra logic để làm cho bàn phím menu thả xuống có thể truy cập được.

HTML được cấu trúc như vậy (tên thêm lớp được sử dụng cho rõ ràng):

<ul> 
    <li class="primaryMenuItem"> 
     <a href="">Link 1</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li> 
    <li class="primaryMenuItem"> 
     <a href="">Link 2</a> 
     <ul class="popUpMenu"> 
      <li><a href="">Sub Link 1</a></li> 
      <li><a href="">Sub Link 2</a></li> 
     </ul> 
    </li>  
</ul> 

Link 1 và Link 2, khi được quét, sẽ hiển thị danh sách sub-menu (trình đơn thả xuống). Tôi có điều này làm việc tốt với một số jQuery và jQuery hoverIntent plugin.

Điều bắt được là thao tác này chỉ hoạt động với chuột tại thời điểm này.

Thách thức tiếp theo là thực hiện thao tác này thông qua bàn phím.

tôi có thể dễ dàng thêm một sự kiện tập trung vào các liên kết cấp cao nhất mà sau đó kích hoạt các menu thứ cấp:

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

đó làm việc tốt.

Để đóng menu, một tùy chọn là, khi mở một menu khác, hãy kiểm tra xem liệu có một tùy chọn khác đã mở hay không và nếu có, hãy đóng nó.

Điều đó cũng hoạt động tốt.

Trường hợp không thành công, tuy nhiên, nếu bạn có menu cuối cùng mở và thoát ra khỏi nó. Vì bạn chưa đặt tab vào một menu khác, trình đơn này vẫn mở.

Thách thức là tìm ra cách/thời điểm đóng menu và logic cần thiết (jQuery) để tìm ra. Lý tưởng nhất, tôi sẽ đóng menu khi tiêu điểm nằm trên một phần tử trên trang KHÁC so với bất kỳ phần tử con nào của trình đơn.

Một cách logic, tôi đang tìm kiếm này:

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu')) 

Tuy nhiên, bạn không thể làm điều đó, kể từ khi LI không thực sự có trọng tâm, nhưng thay vì thẻ neo bên trong nó.

Mọi đề xuất?

UPDATE:

có lẽ là một/cách tốt hơn đơn giản để đặt câu hỏi:

Via jQuery, là có một cách để 'canh' để xem nếu tập trung đã chuyển bên ngoài của tất cả các trẻ em của một đối tượng cụ thể ?

Answer 1

Sử dụng hàm jquery mới 1.4: focusin và focusout thay vì blur và focus. Đây là cách focusout khác:

Sự kiện focusout được gửi đến một yếu tố khi nó, hoặc bất kỳ yếu tố bên trong của nó, mất tập trung. Đây là khác biệt từ sự kiện mờ ở chỗ nó hỗ trợ phát hiện mất tiêu điểm từ phần tử gốc (nói cách khác, nó hỗ trợ sự kiện bubbling).

Answer 2

Hãy thử điều này

$('li.primaryMenuItem:last li a:last').blur([do whatever you need to do]) 

logic, nếu các tab người dùng của bạn ra ông phải được tập trung neo ngoái.

Bạn thậm chí có thể thiết lập xử lý sự kiện của riêng bạn như vậy:

$('li.primaryMenuItem:last').bind('myblur', function() ...); 

và gọi nó trong neo cuối cùng mờ sự kiện:

...blur(function() { 
    $(this).parents('li.primaryMenuItem').trigger('myblur'); ... 

Answer 3

Bạn có thể sử dụng sự kiện bọt để kiểm tra những gì đã tập trung về sự kiện focusin. Tôi đã thành công với mã sau:

$("li:has(ul.popUpMenu)").focusin(function(e) { 
    $(this).children().fadeIn('slow'); 
    }); 
    $('body').focusin(function(e) { 
    if (!$(e.target).parent().is('ul.popUpMenu li')) { 
     $('ul.popUpMenu').fadeOut('slow'); 
    } 
    }); 

Bạn có thể (nên) có thể làm cho nó được tối ưu hóa hơn, nhưng nó hoạt động.

Answer 4

Điều này đã giúp tôi ... http://plugins.jquery.com/project/focus

Nó sẽ phát hiện nếu bạn vẫn tự động ở trong phụ huynh. Về cơ bản nó thay đổi tập trung jQuery để làm việc theo cách này thay vào đó, mà tôi cảm thấy nó hoạt động như thế nào.

<div class="parent"> 
    <input type="text" /> 
    <input type="text" /> 
</div> 

$('#parent').focusout(function() { 
    console.log('focusout of parent'); 
}); 

Tôi không thấy lý do tại sao nhấn tab để di chuyển textfield giữa các phần tử con sẽ kích hoạt tập trung vào cha mẹ vì bạn vẫn ở trong cha mẹ đó. Một cái gì đó phải xảy ra mà sẽ đưa bạn ra khỏi nó cho một thời điểm và tôi nghi ngờ đó là một lỗi ... bất cứ ai với tôi về điều này? Vâng anyway các plugin ở trên sửa chữa nó. Chỉ cần bao gồm nó trước khi mã của bạn để 'sửa' này. Sẽ yêu một ai đó để giải thích tại sao đây không phải là một lỗi nếu nó không phải là.

Cảm ơn, Dom

Answer 5

Làm thế nào về nếu bạn làm như sau:

$('#link_A_id, #link_A_id > *').focusout(function() { 
    if ($(document.activeElement).closest('#link_A_id').length == 0) 
     //focus is out of link A and it's children 
}); 

Answer 6

Tôi đã có một vấn đề tương tự ... Tôi tạo ra một jsfiddle để xác định khi một fieldset mẹ mất tập trung và sau đó gọi một chức năng. Nó chắc chắn có thể được tối ưu hóa, nhưng đó là một sự khởi đầu.

http://jsfiddle.net/EKhLc/10/

function saveFields() { 
    $.each($('fieldset.save'),function(index, value) { 
    // WHERE THE POST WOULD GO 
    alert('saving fieldset with id '+ value.id); 
    $(value).removeClass('save'); 
    }); 

} 
$('.control-group').focusin(function(){ 
    var thefield = $(this).parent('fieldset'); 
    if (!thefield.hasClass('active')) { 
    if($('fieldset.active').length > 0){ 

     $('fieldset.active').removeClass('active').addClass('save'); 
     saveFields(); 
     } 
    thefield.addClass('active'); 
    } else { 
     console.log('already active'); 
    } 
});