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

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位于$（文档）中。就绪（function（），因此代码仅在页面重新加载后激活？是否需要触发重新加载？

CHeers

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

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

演示：小提琴