为什么Jquery .show（）在引导手风琴折叠内显示anchor div？

Question

我对web dev相当陌生。我花了几天时间研究这个（令人尴尬的）并研究了我能想到的所有事情。

我使用的是Rails 5，bootstrap 3和jquery 2.1.3。

我有一个自举手风琴。在各种折叠内容div中，我希望链接到驻留在相同手风琴中但不同折叠面板的内容。

在电流崩塌面板我有这样一个链接：

<a class="self-link" href="#buried_sub_anchor">Buried Sub Anchor</a> 

在不同的合拢面板我有内容的div像这样：

<div class="anchor" id="buried_sub_anchor"> 

我的jQuery代码来处理点击是：

$('.self-link').on('click', function() {expandCollapseWithHash(this.hash); }); 

    function expandCollapseWithHash(hash) { 
    var $collapses = $(hash).parents('.collapse'); 
    if ($collapses.length > 0) { 
     var $collapse = $collapses.first() 
     $collapse.collapse('show'); 
    } 
    } 

当.collapse（'show'）被调用时，我期待bootstrap神奇地关闭当前面板并打开目标。然后，一旦过渡完成，我期待“显示”事件，火灾，这是我处理这样的：

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 
    }); 

我期待.show（）调用跳转页面右边在锚固DIV。但没有骰子。

总之，当我点击我要链接：

1. 当前面板.collapse（ '隐藏'）
2. 目标面板.collapse（ '秀'）
3. 页面跳转到锚定格在目标面板

相反，总是：

1. 当前面板不会改变（即它保持所示）
2. 目标面板不显示
3. 页面跳转到新的位置，但远不及所需的固定股利部分

我的问题是：

1. 为什么不当前面板崩溃了？我期望引导手风琴功能可以通过拨打$collapse.collapse('show')来完成此操作。
2. 为什么页面不滚动到链接的内容？

Here is a fiddle。要重现：

1. 点击“更多详细资料”部分
2. 滚动一路下降
3. 方式点击“埋子锚”链接

Answer 1

那么，我坚持下去，终于有了一个解决方案。我唯一做错的是这条线$(location.hash).show();需要改为location.href = location.hash;。

这使得它跳转到显示所需的div在页眉正下方的顶部。

这是updated fiddle。

其中，单击“更多详细信息”面板标题，然后单击该面板中的链接（即“埋藏子锚点”）。这将展开“Miscellaneous”面板标题并将页面右移到“Buried Sub Anchor text”div。

在旅途中，我拿起了一些有价值的东西。如果上面提到的代码改变是我所做的（即$(location.hash).show(); - >location.href = location.hash;），那么当点击链接时，它会展开目标面板并跳转到你想要去的地方。但是它也会让面板展开/显示你刚刚离开。

的原因不明显，我和固定用下面的代码：

$('#accordion .panel-collapse').collapse({ 
    parent: '#accordion', 
    toggle: false 
}); 

我发现代码上this github page。它初始化个别手风琴折叠元素，因为

数据api ...懒惰实例化，某些.collapse（'show'）没有考虑到。

因此，现在在更新的提琴中，当您单击链接时，它将关闭离开面板，打开目标面板并将页面跳转到目标div，就像我想要的那样。

Answer 2

你必须强制scrollTop做这个。
我喜欢在animate()以内，使它更平滑。

这是唯一我你的小提琴所做的更改：

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 

    var thisId = $(this).attr("id"); 
    var thisOffsetTop = $("#" + thisId).offset().top; 
    var headerHeight = $(".navbar").height(); 
    var myTitleHeight = $(".container h1").first().height(); 

    console.log(thisId); 
    console.log("thisOffsetTop: " + thisOffsetTop); 
    console.log("headerHeight: " + headerHeight); 
    console.log("MyTitleHeight: " + myTitleHeight); 

    // Animation to scrollTo the right position 
    $('html, body').animate({ 
     scrollTop: thisOffsetTop - headerHeight - myTitleHeight 
    }); 
}); 

我离开了所有相关的console.log（）...
看到更新Fiddle。