我的问题特指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();
最佳答案
要继续使用当前的表单,我建议使用 closest()
:
function handler(event) {
$(event.target).closest('li').children("ul").toggle();
}
$("ul").click(handler).find("ul").hide();
虽然我自己使用,但我更喜欢:
$('li').on('click', function(e){
e.stopPropagation();
$(this).find('ul').toggle();
});
引用文献:
关于dom - 使用 JQuery event.target 与 child 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17756811/