我该如何同时跳转到锚点并打开一个 Bootstrap 手风琴？

Question

我是一个Bootstrap手风琴的使用者，它运作得非常好，没有任何问题。但是，我想在手风琴中添加一个链接。我的想法是，一旦我点击该链接，就会跳转到页面的那个部分（手风琴在页面下方），并打开相应的选项卡。

因此，我使用了以下代码：

<a href="#prizes" data-toggle="collapse" data-parent="#accordion"><i class="mdi-action-info"></i></a>

希望它能够工作。在某种程度上它确实可以：它正确地打开了手风琴选项卡，但是页面没有像应该的那样滚动到锚点位置。它只是停留在原来的位置，但是手风琴已经打开了。

有什么解决办法吗？我找到了与jQuery UI手风琴相关的答案，但是没有关于BS手风琴的内容（而且jQuery UI的答案也不起作用），真的不知道为什么这个不能运行。

- Rick Alvarez

---

如果Bootstrap手风琴的JS有一个名为preventDefault()的方法，那么这个问题就不足为奇了。 - matcartmill

Answer 1

为了滚动到锚点，你需要等待可折叠的div完全显示。

JQuery通过折叠事件使我们能够轻松地处理这个问题。

$(document).ready(function() {
    $("#section-two").on('shown.bs.collapse', function() {
        window.location = "#section-two";
    });
});

看看w3schools.com上的 Bootstrap JS Collapse参考文档，快速了解相关技术。

- Michele

---

谢谢！我刚刚花了几个小时才找到这个！ - Good Lux

Answer 2

您可以手动执行以下操作：

<a href="#accordion" id="my-link" class="btn btn-primary">Open group 2</a>

JS

$('#my-link').click(function(e) {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');        
});

Fiddle

- Tomanow

---

谢谢，但我打开它没有问题，我的问题是页面不会滚动到锚点。 - Rick Alvarez

我提供了一个可工作的代码片段，可以滚动，不确定我还能做什么。 - Tomanow

Answer 3

在我的情况下，我喜欢避免添加JavaScript，并决定使用两个属性(data-target和href)，以便每个属性都有一个职责: 1)启动标签和2)跳转到锚点: <a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">

- Ignacio Ara

---

我用了这个，但是锚点是折叠关闭位置而不是打开位置。 - Natim

Answer 4

在 Michele 的回答基础上，这里有一个例子，你可以通过动画滚动到 div:

$(document).ready(function() {
  $('#accordionEvent').on('shown.bs.collapse', function() {
    var position = $('#accordionEvent').offset().top;
    $('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
  });
});

- Chris McGlade

Answer 5

这里有一个工作版本，它不仅可以强制打开一个对应的内容，而且可以像您期望的那样切换它。它还将滚动到页面锚点。最重要的是，它是动态的，因此您不需要为每个对应组手动编写一堆函数。

您的网页将看起来像这样：

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-one" target="_blank">Section One</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section One Text
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading accordian-button">
      <h4 class="panel-title">
        <a href="#section-two" target="_blank">Section Two</a>
      </h4>
    </div>
    <div class="accordian-body panel-collapse collapse in">
      <div class="panel-body">
        Section Two Text
      </div>
    </div>
  </div>
</div>
<div>

现在进入代码部分：

$(".accordian-button").click(function(e) {
  that = $(this)
  accordian = that.siblings('.accordian-body')
  $(".accordian-body").not(accordian).collapse('hide')
  accordian.collapse('toggle')
})

// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')

这是一个可工作的代码片段：
http://jsfiddle.net/dkcb8jLq/31/
请注意，您可以单击 div 元素来切换它，或者单击文本以切换并转到链接。

- user2611793

---

它的拼写是“手风琴”。 - Anne van Rossum

@AnnevanRossum 如果你是美国人就不行。;) - user2611793

在美式英语中，“accordion”的拼写绝对是“accordion”。请参见任何字典。最重要的是，在Bootstrap中，“accordion”的拼写也是这样，因此您的类将无法正常工作。 - Hashim Aziz