jQuery：如何不隐藏包含URL锚点的部分

Question

我的页面上，大多数h3标题下的p段落都是隐藏的。如果你点击它们，下面的内容就会显示出来。只有当页面打开时，第一部分才会显示出来。我使用jQuery来隐藏这些部分，例如：

jQuery("#area h3:first").addClass("active");
jQuery("#area p:not(:first)").hide();

如果其他部分中有一个锚点，并且用户在url末尾加上#来链接它，那该怎么办呢？现在，它会跳转到隐藏的部分，这很烦人，因为文本没有显示。我不想在url中带有锚点时隐藏该部分，例如：http://domain.com/page.php#anchor_in_section_3。

我该如何防止该部分被隐藏/折叠？

详细信息： 在回答1之后，我发现了两个问题：如果您使用.hide和.show仅在一行代码之后，该部分仍然保持隐藏。对于jQuery来说，这似乎太快了。 另一个问题是，使用答案1中描述的解决方案时，只有当锚点不在子标记中时，jQuery才能找到锚点。

这比我想象的更困难:)

因此，描述的解决方案是，除第一个部分和包含锚标记的部分外，所有部分都应该被隐藏。锚点可以在部分的任何（子）标记中。

我已经尝试了2个小时将其转换为jQuery，但我的jQuery知识太差，没有成功。

- GeroB

---

我已更新我的答案以解决这些问题，并添加了一个实时演示。请见下文。 - Ender

Answer 1

要从URL中获取锚点的名称，请使用以下代码行：

var anchorName = document.location.hash.substring(1)

这段代码获取URL的哈希部分，然后删除第一个字符（第一个字符始终是哈希符号“＃”）。以下是相关文档：JavaScript教程，Location.hash。一旦你拥有了它，就可以执行类似以下的操作：

jQuery("#area p:has(a[name=" + anchorName + "])").show();

这将显示包含URL哈希部分中指定名称的锚点的#area中的任何段落。

编辑

为了解决jQuery过快的问题，您可以使用更高级的选择器仅隐藏最终将被隐藏的那些元素，例如：

$("#area > p:not(:first)").filter("p:not(:has(a[name=" + anchorName + "]))").hide();

这段代码的作用是选择除了第一个段落以外的所有段落，然后从中选择不包含给定值的name属性锚点的子集，并隐藏其余内容。第一个段落和任何包含给定名称锚点的段落将保持可见。

这里有一个实时演示：http://jsfiddle.net/JDQxP/

由于在jsFiddle上无法从URL获取哈希值，因此我已经将该行替换为静态值。逐一取消注释以查看每个效果。请注意，“phasellus”锚点位于包装器中，但选择器仍然可以正常工作。

- Ender

---

谢谢！我发现了两个问题：如果你使用.hide和.show，仅在一行代码后，该部分仍然保持隐藏。这对于jQuery来说似乎太快了。另一个问题是，使用此解决方案只能找到锚点，如果它不在子标记中。这比我想象的要困难 :)因此，用文字描述的解决方案是，除了第一个和包含锚点标记的部分之外，所有部分都应该被隐藏。锚可以在任何（子）标记中。我尝试了2个小时将其转换为jQuery，但由于我的jQuery知识太少，没有成功。 - GeroB

根据:has()选择器文档，它会检查所有后代元素，而不仅仅是直接子元素。请在此处查看：http://api.jquery.com/has-selector/ - Ender

还有一个问题：我现在发现，如果包含锚点的部分没有被隐藏，上面的h3标题应该有CSS类“active”。我该怎么做？ 最后一个问题：在你的网站上哪里可以找到你的亚马逊愿望清单？ :) - GeroB

在上一次编辑的语句末尾添加以下内容：'.end().filter(':visible').prev('h3').addClass("active")' 请参见此修改后的演示：http://jsfiddle.net/9rZaG/ 感激之情已足够作为回报 :) - Ender