Javascript 使用外部锚链打开特定的手风琴面板

我有一个引导手风琴设置和工作良好

我需要有外部页面上的链接，这将：

A） 将您带到手风琴内指定的面板

B） 打开指定的面板

链接结构需要采用以下格式（示例）：

Page.html#折叠为
（当然，“collapseTwo”将根据面板的不同而变化）

HTML：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" 
    id="page_container">
    <div id="accordion_search_bar_container">
        <input type="search" 
            id="accordion_search_bar" 
            placeholder="Search"/>
    </div>
    <div class="panel-group" 
        id="accordion" 
        role="tablist" 
        aria-multiselectable="true">
        <div class="panel panel-success" 
            id="collapseOne_container">
            <div class="panel-heading" 
                role="tab" 
                id="headingOne">
                <h4 class="panel-title">
                    <a role="button" 
                        data-toggle="collapse" 
                        data-parent="#accordion" 
                        href="#collapseOne" 
                        aria-expanded="true" 
                        aria-controls="collapseOne">
                    One
                    </a>
                </h4>
            </div>
            <div id="collapseOne" 
                class="panel-collapse collapse in" 
                role="tabpanel" 
                aria-labelledby="headingOne">
                <div class="panel-body">
                    <p>Pellentesque convallis dolor</p>
                    <p>Enim at tincidunt magna dapibus vitae</p>
                </div>
            </div>
        </div>
        <div class="panel panel-primary" 
            id="collapseTwo_Container">
            <div class="panel-heading" 
                role="tab" 
                id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" 
                        role="button" 
                        data-toggle="collapse" 
                        data-parent="#accordion" 
                        href="#collapseTwo" 
                        aria-expanded="false" 
                        aria-controls="collapseTwo">
                    Two
                    </a>
                </h4>
            </div>
            <div id="collapseTwo" 
                class="panel-collapse collapse in" 
                role="tabpanel" 
                aria-labelledby="headingTwo">
                <div class="panel-body">
                    <p>Vestibulum in laoreet nisi</p>
                    <p>Sit amet placerat massa</p>
                </div>
            </div>
        </div>
        <div class="panel panel-danger" 
            id="collapseThree_Container">
            <div class="panel-heading" 
                role="tab" 
                id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" 
                        role="button" 
                        data-toggle="collapse" 
                        data-parent="#accordion" 
                        href="#collapseThree" 
                        aria-expanded="false" 
                        aria-controls="collapseThree">
                    Three
                    </a>
                </h4>
            </div>
            <div id="collapseThree" 
                class="panel-collapse collapse in" 
                role="tabpanel" 
                aria-labelledby="headingThree">
                <div class="panel-body">
                    <p>Curabitur sem eros tempor sit</p>
                    <p>Amet nunc eget, gravida mollis</p>
                </div>
            </div>
        </div>
    </div>
</div>

---

您可以使用

url参数

并执行此操作

示例链接：

jsbin链接：

（函数（）{
var searchTerm，panelContainerId；
//创建不区分大小写的新contains
$.expr['：'].ContainsCaseSensitive=函数（n，i，m）{
返回jQuery（n）.text（）.toUpperCase（）.indexOf（m[3].toUpperCase（））>=0；
};
$（“#手风琴搜索栏”）。打开（'change keyup paste click'，function（）{
searchTerm=$（this.val（）；
$（'#accordion>.panel'）。每个（函数（）{
panelContainerId='#'+$（this.attr（'id'）；
$（panelContainerId+）：非（：ContainesCaseSensitive（“+searchTerm+）））。隐藏（）；
$（panelContainerId+'：ContainesCaseSensitive（'+searchTerm+'））.show（）；
});
});
/*函数根据参数名获取url参数*/
函数getUrlParameter（键）{
key=key.replace（/[\[]/，“\\\[”）。replace（/[\]]/，“\\\]”）；
var regex=new RegExp（“[\\？&]”+key+“=（[^&\]*）”；
var results=regex.exec（window.location.href）；
如果（结果==null）
返回“”；
其他的
返回unescape（结果[1]）。替换（/.*/g，“”）；
}
var panelId=getUrlParameter（'panel'）；
if（panelId）{
变量$panel=$（“#”+panelId）；
$panel.addClass（'in'）；
$（'html，body'）。设置动画({
scrollTop:$panel.offset（）.top}，
“慢”）；
}
}());您可以尝试以下方法：

JS code: 

      $(function () {
            // check if there is a hash in the url
            if (window.location.hash != '') {
                // show the panel based on the hash now.
                $(window.location.hash + '.collapse').collapse('show');
            }

        });

你尝试过使用查询参数并实现它吗？你好，Shivaji，非常感谢-这对打开面板非常有效！！我的请求只剩下“A）带你到手风琴内指定的面板”。如果你添加了一堆面板（或者只是在面板之间添加了一堆
），这样它就可以一直延伸到折叠下面的页面，这段代码就不会把你带到面板。太棒了！！非常感谢你，Shivaji。这已经困扰我好几天了！！
JS code: 

      $(function () {
            // check if there is a hash in the url
            if (window.location.hash != '') {
                // show the panel based on the hash now.
                $(window.location.hash + '.collapse').collapse('show');
            }

        });