如何根据元素内的锚点检测要显示的元素？

Question

我在页面上使用了多个Twitter Bootstrap折叠组。 每个组可能包含几个锚点：

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#section1"></a><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Section 1</a>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                <p><a href="#section1-text1"></a>Section 1 - Text 1</p>
                <p><a href="#section1-text2"></a>Section 1 - Text 2</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#section2"></a><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Section 2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <p><a href="#section2-text1"></a>Section 2 - Text 1</p>
                <p><a href="#section2-text2"></a>Section 2 - Text 2</p>
            </div>
        </div>
    </div>
</div> 

如果我的页面是用URL中的特定哈希值打开的（例如http://example.com#section2-text2 ），则应显示相应的折叠。 我打算使用window.location.hash来了解显示哪个折叠（ jsfiddle ）：

  var hash = window.location.hash;
  if (hash == '#collapseOne' || hash == '#collapseTwo') {
    $(hash).collapse('show');
  }

但是我有两个问题：

1. 如何识别适当的折叠以显示是否不包含哈希值就是名称（例如，anchor和hash是somethingelse-text2 ，即不包含section2 ）； 如何找到锚somethingelse-text2 parent折叠元素？
2. 折叠显示后，我应该手动滚动到锚点吗？

Answer 1

对于问题的第一部分，您可以使用类似以下的内容：

var hash = window.location.hash;
if(hash){
    var targetAnchor = $(hash + ",a[href='"+hash+"']");
    if(targetAnchor.length > 0){
        targetAnchor.closest(".collapse").collapse('show');
    }   
}

对于第二部分，浏览器通常是本机执行的，但是在您的情况下，我很确定它不会发生，因为锚点隐藏在折叠块内。 如果是这样，您可以像这样手动滚动：

$('html, body').animate({
    scrollTop: targetAnchor.offset().top
}, 2000);

基于这个答案 。