twitter-bootstrap 我怎样才能同时锚定和打开 Bootstrap 手风琴？

How can I go to anchor and open a Bootstrap accordion at the same time?

提问by Rick Alvarez

I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.

我正在使用 Bootstrap 手风琴，它的作用就像一个魅力，完全没有问题。但是，我想要一个指向手风琴中某个选项卡的链接。这个想法是，一旦我点击链接，我就会被带到页面的那部分（手风琴真的在页面中）并打开选项卡。

So I used the following:

所以我使用了以下内容：

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

which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.

哪个应该工作。它的部分作用是：它打开手风琴选项卡恰到好处，但是，页面不会像它应该的那样滚动到锚点。它只是保持在相同的位置，但打开手风琴。

Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working

知道如何修复它吗？我找到了与 jQuery UI 手风琴相关的答案，但没有找到关于 BS 手风琴的答案（而且 jQuery UI 答案也不起作用），真的不知道为什么这不起作用

采纳答案by Tomanow

You can do it manually like so:

您可以像这样手动执行此操作：

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

JS

JS

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

Fiddle

小提琴

回答by Michele Milidoni

In order to scroll to the anchor, you should wait until your collapsable div is fully shown.

为了滚动到锚点，您应该等到可折叠 div 完全显示。

JQuery helps us to easily work out with that by collapse events.

JQuery 通过折叠事件帮助我们轻松解决这个问题。

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

Check out Bootstrap JS Collapse Referenceon w3schools.com for a quick documentation.

查看w3schools.com 上的Bootstrap JS 折叠参考以获取快速文档。

回答by Ignacio Ara

In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:

就我而言，我更愿意避免添加 JavaScript 并决定使用两个属性（数据目标和 href），以便每个属性都有一个工作：1）启动选项卡和 2）转到锚点：

<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">

<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">

回答by Chris McGlade

Building off of Michele's answer, here is an example where you can do an animated scroll to the div:

根据 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
  });
});

回答by Mike Bethany

Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamicso you don't need to manually code a bunch of functions for each according group.

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

Your webpage will look something like this:

您的网页将如下所示：

<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>

Now for the code:

现在的代码：

$(".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')

Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/

这是一个工作小提琴：http:
//jsfiddle.net/dkcb8jLq/31/

Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.

请注意，您只需单击 div 即可切换它，也可以单击文本进行切换并转到链接。