如何滚动到手风琴*里面*一个打开的手风琴？

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);
});

此片段有效 - 只要手风琴元素不有儿童手风琴。使用儿童手风琴时，一旦打开父手风琴然后打开儿童手风琴，它会滚动到子元素，然后滚动到父元素。

我需要在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

不幸的是，当您打开儿童手风琴时，两个手风琴都会发出shown.bs.collapse事件。

UPD。您可以通过event.stopPropagation()

避免第二个事件

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

＆＃13;

＆＃13;

$(".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();
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;