为什么Jquery .show（）在bootstrap手风琴折叠中不显示锚点div？

Question

我是Web开发人员的新手。 我花了几天的时间对此进行了研究（尴尬），并研究了我能想到的一切。

我正在使用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'）时，我期望引导程序神奇地关闭当前面板并打开目标。 然后，一旦完成转换，我就希望触发“显示”事件，我将这样处理：

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

我期望.show（）调用将页面直接跳转到锚定div。 但是没有骰子。

总而言之，当我单击所需链接时：

1. .collapse（'hide'）的当前面板
2. .collapse（'show'）的目标面板
3. 跳转到目标面板中锚定div的页面

相反，始终：

1. 当前面板不变（即保持显示状态）
2. 目标面板确实显示
3. 该页面跳转到新位置，但不在所需的锚点div部分附近

我的问题是：

1. 为什么当前面板没有折叠？ 我希望$collapse.collapse('show')调用的结果是引导手风琴功能能够做到这一点。
2. 页面为什么不滚动到链接的内容？

这是一个小提琴 。 复制：

1. 点击“更多详细信息”部分
2. 一直向下滚动
3. 点击“埋入子锚”链接

Answer 1

您必须强制使用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 。

Answer 2

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

这样一来，它就会跳转到页面顶部紧靠标题下方显示所需的div。

这是更新的小提琴 。

在其中，单击“更多详细信息”面板标题，然后单击该面板中的链接（即“埋入子锚”）。 这将展开“其他”面板标题，并将页面右跳到“埋入子锚文本” div。

在旅途中，我得到了一些有价值的东西。 如果上述代码更改是我所做的（即$(location.hash).show(); -> location.href = location.hash; ），则在单击链接时，它将展开目标面板并跳转到你想去哪里。 但这也会使面板展开/显示您也刚刚离开。

原因对我来说并不明显，并通过以下代码解决了：

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

我在github页面上找到了该代码。 它初始化各个手风琴折叠元素，因为

数据api ...惰性实例化，而.collapse（'show'）则没有考虑。

因此，现在在更新的小提琴中，当您单击链接时，它会关闭离开面板，打开目标面板并将页面直接跳到目标div，这正是我想要的方式。