用于嵌套列表项的 JQuery 选择器，仅计算不在链接上的点击次数

Question

我在列表中嵌入了多个列表。

• [X] 顶部列表项 1
• • [X] 内部列表项 1
• • [X]内部列表项 2
• • • [X] 内部内部列表项 1
• • • [X]内部内部列表项目 2
• • [X]内部列表项 3
• [X] 热门列表项 2
• [X] 顶部列表项 3

该列表是按编程方式构建的，因此这只是一个非常基本的示例，实际上它要大得多。 [X] 是一个复选框。这些数字是单击时可切换内部列表的链接。因此，单击“顶部列表项 1”上的“1”将使内部列表项 1、2 和 3 显示。

该列表的结构如下:

<ul>
     <li> Top List item 1
          <ul>
               <li> Inner List item 1</li>
               <li> Inner List item 2
               <ul>
                    <li> Inner Inner List item 1</li>
                    <li> Inner Inner List item 2</li>
               </ul>
               </li>
               <li> Inner List item 3</li>
          </ul>
     </li>
     <li> Top List item 2</li>
     <li> Top List item 3</li>
</ul>

我想做的是，当有人单击列表项中的链接时，它将切换(显示/隐藏)内部列表项。

但是现在，当我单击“内部内部列表项 1”时，它会检查顶部列表项 1 及其内部的所有内容。此外，当我单击链接来切换内部列表时，它会检查所有复选框。

这是 Jquery。

$("li:has(a)").click(function() {
    var checkbox = $("input[type=checkbox]", this);
    checkbox.prop('checked', !checkbox.prop("checked"));

    if(checkbox.data('check')) {
        $("#" + checkbox.id + " input[type=checkbox").each(function(){
            this.prop('checked', !checkbox.prop("checked"));
        });
    }
});

这是我用来切换它的 Jquery:

$("#patterns-data a[data-toggleid]").click(function() {
    var toggleid = $(this).data('toggleid');
    $("#" + toggleid).toggle();
});

所以我需要的是jquery，它允许用户单击列表项上的任意位置来选中其复选框。如果列表项内部有另一个列表，请选中所有这些复选框。如果用户单击链接来切换列表(标签)，则不要检查任何内容，只需切换列表即可。

结合两个点击事件可能是个好主意，但我不确定最好的方法。谢谢您的帮助。

编辑:

好吧，我正在做研究，发现点击事件被多次调用，每个李嵌套调用一次。所以我更改了代码以使用 stopPropagation。现在它只选择单击的项目复选框。我仍然需要它来选择单击的列表项内的所有列表项复选框。

$("li:has(a)", "#patterns-data").click(function(e) { e.stopPropagation();

    var checkbox = $("> input[type=checkbox]", this);
    checkbox.prop('checked', !checkbox.prop("checked"));

    $("> li", this).each(function(){
        var chkbox = $("> input[type=checkbox]", this);
        chkbox.prop('checked', !checkbox.prop("checked"));
    });
});

此外，它还需要忽略对标签的点击，以便当用户尝试切换列表时复选框不会选中。

这是 JSFiddle http://jsfiddle.net/683Te/ 上的代码

Answer 1

如果我正确完成了你的任务。您最好设置一个事件监听器，然后自行处理它的目标。某种委托(delegate)。

$("#list").on("click", function(e){
   var target = e.target,
       targetName = target.tagName.toLowerCase();

   // and do everything by it tagname
   // the behavior is in example
});

并为复选框设置更改监听器，并在需要时触发它。

示例:

http://jsfiddle.net/yj8bv/ 所有评论都在里面。