Question

我是网络开发人员的新手。我花了几天时间研究这个（令人尴尬）并研究了我能想到的一切。

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

我有一个bootstrap手风琴。在各种崩溃内容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（＆＃39; show＆＃39;）时，我希望bootstrap能够神奇地关闭当前面板并打开目标。然后，一旦完成转换，我期待所显示的＆＃39;要开火的事件，我这样处理：

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

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

总结一下，当我点击我想要的链接时：

当前面板为.collapse（＆＃39;隐藏＆＃39;）
目标面板为.collapse（＆＃39; show＆＃39;）
跳转到目标面板中的锚定div的页面

相反，总是：

当前面板无法更改（即保持显示）
目标面板确实显示
页面跳转到新位置，但不在所需的锚点部分

我的问题是：

为什么目前的面板没有崩溃？我希望引导手风琴功能可以通过$collapse.collapse('show')调用来实现。
为什么页面不滚动到链接的内容？

Here is a fiddle。重现：

点击＆＃34;更多细节＆＃34;节
一直向下滚动
点击＆＃34; Buried sub anchor＆＃34;链路

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。

这是updated fiddle。

在其中，单击“更多详细信息”面板标题，然后单击该面板中的链接（即“Buried Sub Anchor”）。这将扩展“杂项”面板标题并将页面右侧跳转到“Buried Sub Anchor text”div。

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

原因对我来说并不明显，并且使用以下代码修复：

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

我在this github page上找到了代码。它初始化了个别的手风琴折叠元素，因为

数据api ... lazy实例化，.collapse（'show'）没有考虑到这一点。

所以现在在更新的小提琴中，当你点击它关闭离开面板的链接时，打开目标面板并将页面直接跳到目标div，就像我想要的那样。

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

2 个答案: