单击哈希链接时切换页面中的元素答案

【问题标题】：Toggle element in page when clicking a hash link单击哈希链接时切换页面中的元素
【发布时间】：2013-09-18 07:55:45
【问题描述】：

我有一些 jQuery，可以将定义列表转换为可展开/可折叠的常见问题解答列表。

// Toggle expand/collapse
$('.faq a').click(function () {
    $(this).toggleClass('active').next().slideToggle('fast');
});

var hash = document.URL.substr(document.URL.indexOf('#'));
$(hash).addClass('active').next().show();
$(hash).parent().parent().prev('a').addClass('active').next().show();

我在整个网站上有几个常见问题解答链接，单击它们会将您转到常见问题解答页面并展开相关问题，问题是一些常见问题解答答案具有指向其他问题的链接，而哈希链接跳转到相关问题，它不会扩展答案。

这是因为 jQuery 在 $(document).ready(function() 中所以代码只有在页面重新加载后才会激活？我需要触发重新加载吗？

干杯

See my jsFiddle for full code.

【问题讨论】：

我认为，除此之外，您的 HTML 无效：dl 的唯一有效子元素是 dt 和 dd；你也有a 元素。 Chrome 的 Inspector 似乎很乐意允许，但根据（快速）阅读规范似乎是错误的。（参考：Crouping content: the dl element.
您可以使用 (a) window.location.hash.substr(1) 获取哈希值，以及 (b) window.onhashchange 来监控哈希值变化（而不是您的点击事件）。
@DavidThomas 更改的原因是为了便于访问。链接需要可以通过键盘访问，而dt 不能。
它仍然无效。这意味着它可能会被构建其 DOM 的浏览器不可预测地改变。将a 嵌套在dt（或dd）中，或者使用带有tabindex 属性集的dt（应该允许键盘导航）。

标签： jquery html css anchor

【解决方案1】：

试试

//for the demo in fiddle you need to use the selector ul li a
$('.faq dd a[href^="#"]').click(function(){
    $($(this).attr('href')).trigger('click')
})

演示：Fiddle

【讨论】：

是的，正如你在小提琴中所说的那样，$('.faq dd a[href^="#"], ul li a') 是一种享受。

【解决方案2】：

单击哈希链接不会重新加载页面，它只是在页面内导航。

您可以将点击事件绑定到为您工作的哈希链接。例如：

$('ul li a').click(function() {
   $($(this).attr('href')).toggleClass('active').next().slideToggle('fast');
});

【讨论】：