Bootstrap Collapse - 打开给定的id片段

Question

想象一下Bootstrap崩溃有3个部分

<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片段标识符？

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

Answer 1

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

要打开给定的HTTP片段标识符,请尝试以下操作:

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

编辑:

正如评论中的bart所指出的那样:小心定位,.collapse因为此类在视口时也用于导航栏xs.

Answer 2

该行将打开正确的哈希值

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

Answer 3

另一个解决方案,更小,更紧凑:

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