utilizzando jQuery event.target lavorare con i bambini

Question

La mia domanda si riferisce specificamente alla http://api.jquery.com/event.target/#example-1

Se si utilizza un arco nel tag <li> o altro per modificare lo stile, come <b> come ho fatto io here, quella parte del l'elemento non attiverà la funzione JQuery per attivare i suoi figli. Come si potrebbe fare questo lavoro?

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

Per continuare a utilizzare la vostra forma attuale, suggerirei usando closest():

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

JS Fiddle demo.

Anche se per il mio uso preferirei:

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

JS Fiddle demo.

Riferimenti:

• closest().
• on().