Bootstrap Collapse - 打开给定的 id 片段

Question

想象一个由 3 个部分组成的 Bootstrap collapse

<div class="panel-group" id="accordion">
    ...
    <div id="accordionOne" class="panel-heading"></div>
    ...
    <div id="accordionTwo" class="panel-heading"></div>
    ...
    <div id="accordionThree" class="panel-heading"></div>
</div>

有没有简单的方法让插件打开给定的HTTP fragment identifier？

示例http://myproject/url#accordionTwo 将打开第二个手风琴

Answer 1

$("#accordionTwo").collapse('show');

要打开给定的 HTTP 片段标识符，试试这个：

$(document).ready(function() {
    var anchor = window.location.hash;
    $(".collapse").collapse('hide');
    $(anchor).collapse('show');
});

编辑：

正如巴特在 cmets 中指出的那样： 定位 .collapse 时要小心，因为当视口为 xs 时，此类也用于导航栏。

Answer 2

这一行将打开正确的哈希

location.hash && $(location.hash + '.collapse').collapse('show');

Answer 3

另一个解决方案，更小更紧凑：

$(document).ready(function() {
  var anchor = window.location.hash;
  $(anchor).collapse('toggle');
});

Answer 4

为了真正简单快速地实现哈希路由，您可以尝试类似Routie

routie({
    accordionOne: function() {
        $('#accordionOne').collapse('show');
    },
    accordionTwo: function() {
        $('#accordionTwo').collapse('show');
    },
    accordionThree: function() {
        $('#accordionThree').collapse('show');
    }
});