Bootstrap折叠 - 打开给定的ID片段 [英] Bootstrap Collapse - open the given id fragment

问题描述

想像一下 Bootstrap崩溃，包含3个部分

 < div class =panel-groupid =accordion> 
 ... 
< div id =accordionOneclass =panel-heading>< / div> 
 ... 
< div id =accordionTwoclass =panel-heading>< / div> 
 ... 
< div id =accordionThreeclass =panel-heading>< / div> 
< / div> 
  

有没有简单的方法让插件打开给定的 HTTP片段标识符？

示例 http：// myproject / url＃accordionTwo 会打开第二个手风琴

解决方案

<$ p $ 。p> $（ ＃accordionTwo）崩溃（ '节目'）;


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

  $（document）.ready（function（）{
 var anchor = window.location.hash; 
 $（。collapse）。 （'hide'）; 
 $（anchor）.collapse（'show'）; 
}）; 
  

编辑：

正如bart在评论中所指出的那样：
要小心瞄准 .collapse ，因为这个类在视口<$时也用于导航栏c $ c> xs 。

Imagine a Bootstrap collapse with 3 parts

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

Is there a simple way to make the plugin open the given HTTP fragment identifier ?

Example http://myproject/url#accordionTwo would open the second accordion

解决方案

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

To open the given HTTP fragment identifier, try this:

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

EDIT:

As pointed by bart in the comments: be careful with targeting .collapse because this class is also used for the navigation bar when the viewport is xs.

这篇关于Bootstrap折叠 - 打开给定的ID片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！