2

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

  • [X] Top List 项目 1
    • [X] 内表项 1
    • [X] 内部清单项目 2
      • [X] 内内表项 1
      • [X] 内内列表项 2
    • [X] 内表项 3
  • [X] Top List 项目 2
  • [X] Top List 项目 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，它允许用户单击列表项上的任意位置以检查其复选框。如果列表项中有另一个列表，请选中所有这些复选框。如果用户单击链接以切换列表（标签），则不要检查任何内容，只需切换列表即可。

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

编辑：

好的，我正在研究，发现单击事件被多次调用，每个 li 嵌套一次。所以我更改了我的代码以使用 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/

4

1 回答 1

3

如果我做对了你的任务。比你最好设置一个事件监听器，并自己处理它的目标。某种贬义。

$("#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/ 里面的所有评论。

于 2013-01-29T17:02:25.393 回答