分层扩展/折叠树中的jquery选择器问题

Question

我正在尝试构建一个屏幕，该屏幕将是按层次结构分类的书签列表。 可以扩展/收缩类别以显示或隐藏该类别的书签。 现在，我只是在UI上工作，并且是第一次使用jquery（并喜欢它）。

我使用的方法有点像手风琴，但是可以同时打开多个部分，并且可以有多个层次（手风琴仅支持一个层次）。 对于每个类别，都有一个div，其中包含文件夹的图像，该图像将显示或隐藏DOM中的下一个元素，即书签的集合（通常是<ul>）。 例如：

<div class="categoryLine" id="d4">
    <img class="folder"....>
    Fourth Menu Item
</div>
<ul id="u4">
    <li id="l41">

我使用$(this).parentsUntil('categoryLine').next().toggle(transitionSpeed);选择要关闭的元素$(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); 用户单击的图像周围的div具有classLine类，要显示/隐藏的是该div后面的元素。

问题出在最复杂（最深的层次）部分，有些事情本不应该被隐藏，并且由于未知的原因而再次出现。

您可以在此处看到“有效”的示例。 我已经给了相关的标签ID，并在调试警报中显示了单击的元素的ID以及要打开和关闭的元素的ID（查看源代码以查看此信息）。

1. 单击文件夹中的“第四菜单项”以取消隐藏该类别。 您应该看到子1，子2和子3出现。
2. 单击“第四菜单项子1”的文件夹。 您应该看到sub 1展开，但是sub 2完全消失，包括类别行。 这是我要解决的谜。 正确单击子1会显示“从类别'd41'切换'u411'”，但是当<ul> u411消失时，所有子2也消失。 同样，如果我单击文件夹以展开sub2，则sub3消失。

我愿意以完全不同的方式来实现它（同样，这是我的第一个jquery实验）。 我也愿意研究一下一次只能打开一个类别的解决方案，只要它仍然支持层次结构而不是像手风琴那样的深层次。

提前致谢。

Answer 1

jQuery将parentsUntil()描述为：

描述：获取当前匹配元素集中每个元素的祖先，直到但不包括选择器匹配的元素。

需要注意的重要部分是您没有选择.categoryLine 。 似乎您想将其包括在内。 如果您使用closest()代替，应该可以使用。

$(this).closest('.categoryLine').next().toggle(transitionSpeed); 

作为旁注，以备将来参考。 ('categoryLine')不是选择器。 通常，您需要包含. ， #或元素类型，即div 。 但是，还有更高级的方法。 您可能需要阅读jQuery选择器 。