Sử dụng JQuery event.target để làm việc với trẻ em

Question

Câu hỏi của tôi đề cập cụ thể đến http://api.jquery.com/event.target/#example-1

Nếu bạn sử dụng một khoảng trong thẻ <li> hoặc khác để thay đổi phong cách như <b> như tôi đã làm here, đó là một phần của yếu tố sẽ không kích hoạt chức năng JQuery để chuyển đổi nó là trẻ em. Làm thế nào có thể đi về làm công việc này?

HTML:

<ul> 
    <li><b>This doesn't work,</b> this does 
    <ul> 
     <li>sub item 1-a</li> 
     <li>sub item 1-b</li> 
    </ul> 
    </li> 
    <li>item 2 
    <ul> 
     <li>sub item 2-a</li> 
     <li>sub item 2-b</li> 
    </ul> 
    </li> 
</ul> 

JavaScript:

function handler(event) { 
    var $target = $(event.target); 
    if($target.is("li")) { 
    $target.children("ul").toggle(); 
    } 
} 
$("ul").click(handler).find("ul").hide(); 

Answer 1

Để tiếp tục sử dụng hình thức hiện tại của bạn, tôi khuyên bạn nên sử dụng closest():

function handler(event) { 
    $(event.target).closest('li').children("ul").toggle(); 
} 
$("ul").click(handler).find("ul").hide(); 

JS Fiddle demo.

Mặc dù để sử dụng riêng của tôi, tôi muốn:

$('li').on('click', function(e){ 
    e.stopPropagation(); 
    $(this).find('ul').toggle(); 
}); 

JS Fiddle demo.

Tài liệu tham khảo:

• closest().
• on().