0

我正在尝试构建一个屏幕，它将是书签的分层列表，分为类别。可以扩展/收缩类别以显示或隐藏该类别的书签。现在我只是在 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);其中用户单击的图像周围的 div 具有 categoryLine 类，要显示/隐藏的是该 div 后面的元素。

问题出在最复杂（最深层次）的部分，一些不应该隐藏的东西被隐藏了，并且由于未知原因重新出现。

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

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

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

提前致谢。

4

1 回答 1

1

jQuery 描述parentsUntil()为：

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

需要注意的重要部分是您没有选择.categoryLine. 看起来好像你想包括它。如果你改用它应该可以工作closest()。

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

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

于 2010-02-15T06:03:45.377 回答