我有一个功能，允许我通过单击列表项来展开和折叠无序列表，但问题出在最低级别的 LI 我有一个嵌入了复选框的表，当用户单击表时 [编辑]显示父 li 的背景图像。
在我看来，有两条主要途径可以解决这个问题，以某种方式仅删除子 li 的背景图像或取消绑定子 li 的单击事件。我正在尝试取消绑定最低级别 LI 上的单击处理程序，但它不起作用。下面是简化版。用户不应该能够点击 td 单元格。
如果您查看 jsfiddle，我无法添加将问题完全复制到您可以看到问题的地方的 png 文件，但只要在子 li 上触发“警报”，您就可以告诉子 li 仍然是可点击的。
HTML
<ul id="expList">
<li>Category 1
<ul>
<li class="detailLI"> Category 1.1
<table>
<tr><td><input type="checkbox"></td><td>Part A</td></tr>
<tr><td><input type="checkbox"></td><td>Part B</td></tr>
<tr><td><input type="checkbox"></td><td>Part C</td></tr>
</table>
</li>
<li class="detailLI"> Category 1.2
<table>
<tr><td><input type="checkbox"></td><td>Part D</td></tr>
<tr><td><input type="checkbox"></td><td>Part E</td></tr>
</table>
</li>
</ul>
</li>
</ul>
JavaScript
$('#expList').find('li:has(ul)')
.click( function(event) {
//If line item is expandable but has no line items then call the service to retrieve data
if($(event.target).hasClass('collapsed') && $(event.target).find('li').length==0){
retrieveResults($(event.target));
}
//Toggle the lists if they show or not
$(event.target).toggleClass('expanded');
$(event.target).children('ul').slideToggle('medium');
event.stopPropagation();
$('.detailLI').unbind("click");
})
.addClass('collapsed')
.removeClass('expanded')
.children('ul').hide();