使用JQuery event.target与孩子们一起工作

Question

我的问题专门针对http://api.jquery.com/event.target/#example-1

如果你在<li>或其他标签中使用span 来改变样式,<b>就像我在这里所做的那样,元素的那一部分将不会触发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小提琴演示.

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

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

JS小提琴演示.

参考文献:

• closest().
• on().