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 知识很差，但没有成功。

Answer 1

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

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

检索 URL 的哈希部分，然后删除第一个字符（第一个字符将始终是哈希符号“#”）。以下是一些相关文档：Javascript Tutorial, Location.hash。完成后，请执行以下操作：

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

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

编辑

为了解决 jQuery 太快的问题，你可以使用更高级的选择来只隐藏那些最终会被隐藏的选项，如下所示：

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

也就是说，取除第一个段落之外的所有段落，然后取那些不包含具有name 属性给定值的锚点的子集，并隐藏剩下的任何内容。第一段，以及任何包含具有给定名称的锚点的内容都将保持可见。

这是一个现场演示：http://jsfiddle.net/JDQxP/

因为我们无法从 jsFiddle 上的 URL 获取哈希值，所以我用静态值替换了该行。一次取消注释它们以查看每个的效果。请注意，“phasellus”锚点位于包装器跨度中，但选择器仍然可以正常工作。