爲什麼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。