Jquery 如何访问HTML子列表

所以我有这个结构（这是一个例子），第一个列表是列出客户机，第二个列表是显示/隐藏每个客户机的文档：

<ul class="first_ul">
     <li class="first_li">
          <span>ClientName</span>
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Document 1</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
</ul>

我的问题是，我无法访问该子列表，因为每次我尝试单击该复选框时，该子列表都会隐藏，当我按F12查看发生了什么时，我只能从第一个列表中选择li

---

有没有办法解决这个问题，比如说，子列表比第一个列表更重要，或者我不知道。谢谢

您需要在父li的单击处理程序中使用

e.stopPropagation

如下所示，这将停止从子元素到父元素的单击事件传播，从而触发父li元素的单击事件，即第一个li。此外，还添加了if条件来检查单击的元素是否为li或其子元素

另外，使用

find（）

获取类

sub_ul

$（文档）.ready（函数（）{
$（“.first_ul li”）。单击（“click”，函数（e）{
e、 停止传播（）；
//如果未单击父级，则返回
如果（例如，目标！==此）
返回；
var child=$（this.find（'.sub_ul'）；
child.slideToggle（）；
});
});





子菜单1






子菜单2






子菜单3



在
.sub_ul
上使用或在
下要停止的地方单击
事件


$（“.first_ul li”）。在（“单击”，函数（）{
var child=$（this.children（'.sub_ul'）；
child.slideToggle（）；
});
$（'.sub_ul'）。单击（函数（e）{
e、 停止传播（）；
});
。首先\u li{
背景：浅灰色；
}
sub_ul先生{
背景：灰色
}



客户名称


文件1



点击first_ul后，你没有得到你想要达到的目标，你能详细说明一下吗？是的，我的错，第一个列表是显示一个客户列表，每个客户都有一个文档子列表，这里显示的只是一个结构示例。@Martinez请解释你期望的结果是什么？@Martinez，请检查我提供的答案
e.stopPropagation
@Pedram我想做的只是在单击第一个li时显示/隐藏该子列表，而不是在单击该子列表时显示/隐藏该子列表。它对我也是这样做的，问题是该子列表被该第一个li包围，因此当我尝试单击该子列表时，它会单击该li。当我检查时，我看不到子列表，它只是将我标记为第一个li，这就是为什么它总是显示/隐藏子列表，即使我单击复选框。确定。。。我添加了if条件来检查是否单击了父项，然后只显示/隐藏子项，否则返回。。请检查我的更新答案，让我知道这是否有效，完全一样，现在如果我单击clientName，它不会显示/隐藏子列表，但当我单击任何其他内容时，包括子列表，它将执行切换操作。当我检查元素时，它仍然将子列表标记为第一个li，我不知道它是否适用于该元素。代码片段对我有效，我只能在单击第一个li时显示/隐藏子列表，不确定为什么它对您无效。你能在代码片段或JSFIDLE上重新创建它吗？这样我就可以查看itI找到它了！sub ul css有指针事件：没有，我不知道为什么，我的程序没有，只是修复了它。谢谢朋友们！我不明白，伙计，你的例子工作得很好，但不是我的当我检查你的例子时，我可以到达你的子列表我可以标记“文档1”，但在我的情况下，当我检查子列表打开时，我尝试访问它时，它总是标记第一个li“ClientName”.@Martinez你是清除了缓存还是没有其他脚本冲突？我找到了！sub ul css有指针事件：没有，我不知道为什么，我的程序没有，只是修复了它。谢谢朋友们！
     $(".first_ul li").on("click", function(){   
         var child = $(this).children('.sub_ul');
         child.slideToggle(); //toggle current one
     });