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

Question

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

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

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

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

问题出现在最复杂（最深层次）的部分，有些事情是隐藏的，不应该出现，并且出于不明原因重新出现。

您可以看到“工作”示例here。我已经给出了相关的标签ID并输入了调试警报，以显示点击的元素的ID以及要打开和关闭的元素（查看源代码以查看此内容）。

1. 单击“第四个菜单项”的文件夹以取消隐藏该类别。您应该看到sub 1，sub 2和sub 3出现。
2. 单击“Fourth Menu Item sub 1”的文件夹。您应该看到sub 1展开，但sub 2完全消失，包括类别行。这是我试图解决的谜。正确地点击sub 1说“从'd41''切换'u411'”但是当＆lt; ul＆gt; u411消失了，所有sub 2也消失了。同样，如果我点击文件夹展开sub2，则sub3会消失。

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

提前致谢。

Answer 1

jQuery将parentsUntil()描述为：

  

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

需要注意的重要一点是，您没有选择.categoryLine。看起来好像你想包括它。如果您使用closest()，则应该可以使用。

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

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