javascript - 如何滚动到 Accordion *内部*打开的 Accordion ？

Question

我有以下结构(内容减少后可能复制/粘贴错误)。它基本上是折叠元素内的折叠元素。

我还有以下代码，用于在单击后滚动到打开的 Accordion 元素:

$(".accordion").on("shown.bs.collapse", function() {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');
    $('html, body').animate({
        scrollTop: $(myEl).offset().top - 6
    }, 500);
});

此代码段有效 - 只要 Accordion 元素不有子 Accordion 。对于子 Accordion ，发生的情况是，一旦打开父 Accordion ，然后打开子 Accordion ，它会滚动到子元素，然后滚动到父元素。

我需要在 JavaScript 代码段中修改什么才能使其正常工作？
我很确定当前的问题是由于使用 .prev 引起的。

<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            ...
            ...
            ...
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            ...
                            ...
                            ...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

不幸的是，当您打开子 Accordion 时，两个 Accordion 的 shown.bs.collapse 事件都会被触发。

更新。您可以通过 event.stopPropagation() 避免第二个事件

https://jsfiddle.net/glebkema/t1wqbxwh/

$(".accordion").on("shown.bs.collapse", function(e) {
    var myEl = $(this).find('.collapse.in').prev('.panel-heading');
    $('html, body').animate({
        scrollTop: $(myEl).offset().top - 6
    }, 500);
    e.stopPropagation();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<p>...</p>
<p>...</p>
<p>...</p>

<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            <p>...</p>
            <p>...</p>
            <p>...</p>
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            <p>...</p>
                            <p>...</p>
                            <p>...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<p>...</p>
<p>...</p>
<p>...</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

你可以尝试使用a[aria-expanded="false"]' ).click

https://jsfiddle.net/glebkema/soc0rp3w/

$( 'a[aria-expanded="false"]' ).click(function() {
    $('html, body').animate({
        scrollTop: $(this).offset().top - 6
    }, 500);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<p>...</p>
<p>...</p>
<p>...</p>

<div class="panel-group accordion" id="application-migration" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="migrate-hybrid">
            <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#hybrid-migration" href="#collapseMigrateHybrid" aria-expanded="false" aria-controls="collapseMigrateHybrid"> ... </a>
                    </h4>
        </div>

        <div id="collapseMigrateHybrid" class="panel-collapse collapse" role="tabpanel" aria-labelledby="migrate-hybrid">
            <p>...</p>
            <p>...</p>
            <p>...</p>
            <div class="panel-group accordion" id="setupCordova" role="tablist" aria-multiselectable="false">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="setupCordova">
                        <h4 class="panel-title">
                            <a class="preventScroll" role="button" data-toggle="collapse" data-parent="#setupCordova" data-target="#collapseCordova" aria-expanded="false" aria-controls="collapseCordova"> ... </a>
                        </h4>
                    </div>

                    <div id="collapseCordova" class="panel-collapse collapse" role="tabpanel" aria-labelledby="setupCordova">
                        <div class="panel-body">
                            <p>...</p>
                            <p>...</p>
                            <p>...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<p>...</p>
<p>...</p>
<p>...</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>