jquery - 打开带有 anchor 链接的特定 Accordion

Question

编辑:这已在这里解决:Open a specific accordion panel with an external anchor link

我正在循环播放 Accordion (使用 Coldfusion)，它显示数据并且工作正常。我试图根据链接打开任何面板 (page.cfm#collapse20)。

这是没有任何 Coldfusion 的 Accordion 代码...

(function() {
    var searchTerm, panelContainerId;
    // Create a new contains that is case insensitive
    $.expr[':'].containsCaseInsensitive = function(n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#accordion_search_bar').on('change keyup paste click', function() {
        searchTerm = $(this).val();
        $('#accordion > .panel').each(function() {
            panelContainerId = '#' + $(this).attr('id');
            $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
            $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
        });
    });
}());

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

再说一遍，我只是在寻找一种使用锚定链接打开任何一个 Accordion 的解决方案。

如果我需要提供更多信息，请告诉我，感谢您的帮助!

Answer 1

这是一个应该有所帮助的示例。我在顶部添加了 3 个链接，每一页一个。每个链接都有一个与折叠面板中页面链接之一的 href 属性相匹配的数据属性。单击其中一个页面时，脚本将折叠所有页面，然后运行 ​​.collapse("show") 以显示关联的页面。

$(function() {

// close all pages for this example
$(".collapse").collapse("hide");

// check the url hash when we first load the page
if (window.location.hash != "") {
    $(window.location.hash).collapse("show");
}

// attach click event handlers to the links with the class page-link
$("a.page-link").on("click", function() {
    var ref = $(this).data("page");
    
    // close all pages
    $(".collapse").collapse("hide");

    // show the selected page
    $(ref).collapse("show");
});

});

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

<a href="#" class="page-link" data-page="#collapseOne">Page 1</a>&nbsp;
<a href="#" class="page-link" data-page="#collapseTwo">Page 2</a>&nbsp;
<a href="#" class="page-link" data-page="#collapseThree">Page 3</a>&nbsp;

<div class="container" 
    id="page_container">
    <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="false" 
                        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>