dom - 使用 JQuery event.target 与 child 一起工作

Question

我的问题特指http://api.jquery.com/event.target/#example-1

如果您在 <li> 中使用跨度或其他标签来更改样式，例如 <b>正如我所做的那样here ，该元素的该部分不会触发 JQuery 函数来切换其子元素。如何才能完成这项工作？

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

要继续使用当前的表单，我建议使用 closest():

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

JS Fiddle demo .

虽然我自己使用，但我更喜欢:

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

JS Fiddle demo .

引用文献:

• closest() .
• on() .