jquery - 单击哈希链接时切换页面中的元素

Question

我有一些 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() 中，所以代码只有在页面重新加载后才会激活？我需要触发重新加载吗？

干杯

有关完整代码，请参阅我的 jsFiddle。

Answer 1

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

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

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

Answer 2

尝试

//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')
})

演示：小提琴